ff not working on my page? [Archive]

jcdevelopment

02-19-2008, 09:53 PM

For some reason my page is acting strange in FF. I have a div with a class inside of it. It is labeled as navigation. For some reason i can get it to look like i want it to in IE. here is my code along with some screen shots

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}

body {
background-color:#7F7F60;
background-image:url(gfx/bg_image_main.gif);
background-position:top left;
background-repeat:repeat-x;
}

#topHeader {
background-image:url(gfx/top_border.gif);
width:832px;
height:218px;
margin:0 auto;
}
#mainContainer {
width:832px;
height:800px;
background-image:url(gfx/content_border.gif);
background-repeat:repeat-y;
margin:0 auto;
}

#bottomContainer {
width:832px;
background-image:url(gfx/bottom_section_container.gif);
background-repeat:no-repeat;
height:12px;
margin:0 auto;
}

/*------------------------------------------------------NAVIGATION---------------------------------*/

.navigation {
margin:168px auto;
height:38px;
/*background-color:#00CC00;*/
width:830px;
text-align:center;

}

.navigation ul {
margin:0 auto;
padding:10px;
}

.navigation li {
display:inline;
padding-left:20px;

}

.navigation a {
font-family:"Myriad Pro";
color:#000;
font-size:15px;
list-style-type:none;
text-decoration:none;
}

.navigation a:hover {
color:#FFFFFF;
}
</style>
</head>

<body>
<div id="topHeader">
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>

<li><a href="#">Sign In</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">My Information</a></li>
<li><a href="#">Help</a></li>
</ul>

</div>

</div>
<div id="mainContainer"></div>
<div id="bottomContainer"></div>

</body>
</html>

im not sure whats going on, whether i need to change some positioning or what. Thanks for any help guys!!

the first shot is FireFox the second is Internet explorer

_Aerospace_Eng_

02-19-2008, 10:07 PM

I think Firefox is right in this instance. You have this
.navigation {
margin:168px auto;
height:38px;
/*background-color:#00CC00;*/
width:830px;
text-align:center;

}
That means you are giving the navigation a top and bottom margin of 168px. It looks like in your screenshots the navigation is 168px from the top but they are collapsing. This might explain it better. http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php