Personal Development for Smart People^TM Forums

tstesen · 12-12-2007, 02:45 AM

I'm working on a project for a client of mine. The web site itself is complete and working well. However said client utilizes BosDev directories that require customization to coordinate with the main web site.

I've checked and rechecked but I cannot seem to figure out why the directory pages are not center aligning. If anyone could take a minute to evaluate the pages I'd be extremely grateful. I think a fresh set of eyes might see something I'm simply overlooking.

The page not aligning is located here Mommy Perks.

The above page should look like this About Mommy Perks.

There also seems to be an issue relating to the CSS files on the misaligned page. The about us, contact, etc. text at the top is displayed larger than set in the CSS file as shown in the about page above. I'm not sure how that's possible as the page is linked to the exact same CSS files used in the main site pages, I have not altered the CSS files in any way on the directory pages.

Please help! Thanks in advance for taking the time to look the pages over.

Tanya

aussieNickuss · 12-12-2007, 05:25 AM

That page looks perfect in Firefox....but looks like a dog's breakfast in Internet Explorer.

Here is what is most likely causing the problem. You have this code (a set of html, head, meta and body tags) above a second set of html, head and body tags.....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
 <head>
  <title>Mommy Perks</title>
  <meta name="description" content="Mommy Perks: Where being a mom saves you money every day!">
  <meta name="keywords" content="discounts, shops for mom, save money, mom discount">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="Wed, 27 Dec 2000 08:00:00 GMT">

  <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  <link href="http://www.mommy-perks.com/perks2/styles/style.css" rel="stylesheet" type="text/css">
 </head>

 <body>
  <script language="JavaScript" src="http://www.mommy-perks.com/perks2/javascript.js"></script> ^^ THE ABOVE IS IN THE WRONG SPOT ^^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check Perks</title>
<meta name="keywords" content="check perks">

<link rel="shortcut icon" href="http://www.mommy-perks.com/favicon.ico">
<link href="http://www.mommy-perks.com/common.css" rel="stylesheet" type="text/css" />
<link href="http://www.mommy-perks.com/headNav.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="http://www.mommy-perks.com/headNav_IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- <link href="MISSING: headNav_IE6_css :MISSING" rel="stylesheet" type="text/css" /> -->
<link href="http://www.mommy-perks.com/productPages.css" rel="stylesheet" type="text/css" /> 
	<style>
<!--
td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
* {-moz-box-sizing:border-box;box-sizing:border-box;}
-->
</style>  
</head>

	
<body leftmargin="5" topmargin="5" rightmargin="0" bottommargin="0" align="center">.......

What you need to do is cut out the top set of META tags and paste them underneath your second <head> tag (on line 17). Then scrap everything else above like so.......

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
 <head>
  <title>Mommy Perks</title> <---- delete MOVE THIS --> 

<meta name="description" content="Mommy Perks: Where being a mom saves you money every day!">
  <meta name="keywords" content="discounts, shops for mom, save money, mom discount">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="Wed, 27 Dec 2000 08:00:00 GMT">

  <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  <link href="http://www.mommy-perks.com/perks2/styles/style.css" rel="stylesheet" type="text/css">
 </head> <body> <-- delete AND THIS ---> <script language="JavaScript" src="http://www.mommy-perks.com/perks2/javascript.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check Perks</title>
<--- MOVE TO HERE
<meta name="keywords" content="check perks">

<link rel="shortcut icon" href="http://www.mommy-perks.com/favicon.ico">
<link href="http://www.mommy-perks.com/common.css" rel="stylesheet" type="text/css" />
<link href="http://www.mommy-perks.com/headNav.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="http://www.mommy-perks.com/headNav_IE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- <link href="MISSING: headNav_IE6_css :MISSING" rel="stylesheet" type="text/css" /> -->
<link href="http://www.mommy-perks.com/productPages.css" rel="stylesheet" type="text/css" /> 
	<style>
<!--
td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 16px;
}
* {-moz-box-sizing:border-box;box-sizing:border-box;}
-->
</style>  
</head>

	
<body leftmargin="5" topmargin="5" rightmargin="0" bottommargin="0" align="center">.......

Hope that makes sense.

By the way, grab Mozilla Firefox, and install the Web Developer and SGML HTML Tidy extensions. They help out diagnosing these problems.

YazKMan · 12-12-2007, 03:41 PM

One extension that I can't live without anymore is Firebug, for Firefox. Really useful for a multitude of things, and in your case would help you solve some of the problems you're having.

tstesen · 12-12-2007, 04:37 PM

Thanks for the suggestions Nickuss. I'm going to try it now and see if it works. We are doing a soft launch this morning and after so many hours of work last night I guess I couldn't see the forest for the trees.

12-12-2007, 02:45 AM	#1 (permalink)
tstesen Senior Member Join Date: Aug 2007 Location: Pueblo West, CO Posts: 141	HTML/CSS Help I'm working on a project for a client of mine. The web site itself is complete and working well. However said client utilizes BosDev directories that require customization to coordinate with the main web site. I've checked and rechecked but I cannot seem to figure out why the directory pages are not center aligning. If anyone could take a minute to evaluate the pages I'd be extremely grateful. I think a fresh set of eyes might see something I'm simply overlooking. The page not aligning is located here Mommy Perks. The above page should look like this About Mommy Perks. There also seems to be an issue relating to the CSS files on the misaligned page. The about us, contact, etc. text at the top is displayed larger than set in the CSS file as shown in the about page above. I'm not sure how that's possible as the page is linked to the exact same CSS files used in the main site pages, I have not altered the CSS files in any way on the directory pages. Please help! Thanks in advance for taking the time to look the pages over. Tanya

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

12-12-2007, 03:41 PM	#3 (permalink)
YazKMan Junior Member Join Date: Sep 2007 Posts: 28	One extension that I can't live without anymore is Firebug, for Firefox. Really useful for a multitude of things, and in your case would help you solve some of the problems you're having.

12-12-2007, 04:37 PM	#4 (permalink)
tstesen Senior Member Join Date: Aug 2007 Location: Pueblo West, CO Posts: 141	Thanks for the suggestions Nickuss. I'm going to try it now and see if it works. We are doing a soft launch this morning and after so many hours of work last night I guess I couldn't see the forest for the trees.

Personal Development for Smart PeopleTM Forums

Personal Development for Smart People^TM Forums