...

View Full Version : ff not working on my page?



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, 09:56 PM
Since you are using images screenshots and code are useless without having access to the images. Post a link to your site.

jcdevelopment
02-19-2008, 10:01 PM
i would love to, but its published on a private Intranet,i understand if its difficult without a link. I would always rather have a link. So if its a nusance dont worry about it, i just wanted to know if anyone saw one little problem i was missing.

_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

jcdevelopment
02-19-2008, 10:11 PM
thanks, that fixed it, thanks for the link also i will put it in my many links!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum