...

View Full Version : Floated nav bar problem in IE



nicky77
12-20-2007, 11:03 AM
Hi, i'm looking for a wee bit of guidance on my page layout. It looks fine in Firefox and Safari, but IE6 and IE7 are both giving me some problems. In IE6, my main menu is sitting too high, while my quick links (left hand side) are also a little bit too high. In IE7, my main menu is fine but my quick links are a bit too low! Before I end up hacking my CSS to pieces, I want to make sure there's not something simple i'm missing which could rectify these issues.

I'm linking to two separate CSS files - one for my overall page layout, one specifically for the navigation layout. Not sure if there's a problem with me floating my #quicklinks div to the left in the styles.css stylesheet, then styling the elements inside that div in the nav.css stylesheet? Anyway, the url is
http://www.antoninesportscentre.co.uk/home/lomond_school/

styles.css


/*********** Main structure *************************/
* html, body, #container {margin:0;padding:0;height:100%;}

body {
font-size:1em;
height:100%;
background-color:#000033;
text-align:center;
}

#container {
background-image: url("../images/home.jpg");
background-repeat:no-repeat;
font-family: Trebuchet MS;
font-size: 0.7em;
color: #000000;
width:900px;
margin-top:2px;
margin-left: auto;
margin-right: auto;
text-align:left;
height:800px;
}

#upper {
height:105px;
margin-left:10px;
width:250px;
padding-top:1px;
font-size:0.9em;
overflow:auto;
line-height:1.2em;
color:white;
}

#mainmenu {
margin-top:-5px;
margin-left:3px;
width:890px;
height:120px;
}

#quicklinks {
float:left;
margin-left:15px;
margin-top:80px;
width:250px;
height:470px;
display:inline;
}

#content {
float:right;
margin-right:10px;
width:590px;
margin-top:90px;
margin-bottom:10px;
height:460px;
overflow:auto;
}

#flashmovie {
height:200px;
}

#footer {
clear:both;
margin-left:auto;
margin-right:auto;
margin-top:30px;
text-align:center;
width:900px;
height:40px;
font-size: 0.8em;
}

then, the relevant stuff from nav.css


/**************** main menu styles****************/
ul#nav {position:absolute;margin-left:0px;}
ul#nav li {float:left; list-style-type:none; }
ul#nav li a {height:34px; display:block; position:absolute; text-indent:-9999px; outline:none}

//Quick link menu styles
ul#quicknav {list-style:none;}
ul#quicknav li {list-style-type:none; }
ul#quicknav li a {
height:103px;
display:block;
text-indent:-9999px;
outline:none;
margin-left:-31px;
}

Grateful for any help on this

Excavator
12-20-2007, 11:46 AM
IE7 and FF2 look exactly the same on this Vista machine.
Have you validated lately? Your using an id more than once.

nicky77
12-20-2007, 12:18 PM
Solved the problem - my encoding declaration - <?xml version='1.0' encoding='UTF-8'?> - was throwing IE into quirks mode.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum