Need help fixing IE float drop on ul menu

[mlogan78]

Hello,

I have been working on a new layout for a client website, the layout includes a horizontal nav bar which i did with list items, the nav bar buttons is a single css sprite image for the up and over states. The nav bar and css sprite works perfect in FF, chrome and opera Screenshot, but has a strange float drop or step down issue in IE8 IE Screenshot.

The sprite image is 950px wide all the ‘a’ elements add up 949px as defined in my css file and the main topNav div which contains the ul list is set to 960px the ul element is set to 960px wide also.

Here is the HTML code for the nav bar,

Home


Parties


Previous Parties


Gallery


About Us

And here is the CSS code:

#topNav

{

width:965px;

height:41px;

margin-top:0;

position:absolute;

top:117px;

left:30px;

}



/*CSS for top nav ***menu*** elements */

#nav

{

width:960px;

margin:0;

padding:0;

list-style:none;

}



#nav li a

{

background-image:url(images/nav-sprite.png);

display:block;

overflow:hidden;

text-indent:-4000px;

float:left;

}



#nav li a.nav-home {background-position:0px 0px; width:141px; height:41px;}

#nav li a:hover.nav-home {background-position:0px -42px; width:141px; height:41px;}

#nav li a.nav-parties {background-position:-141px 0px; width:166px; height:41px;}

#nav li a:hover.nav-parties {background-position: -141px -42px; width:166px; height:41px;}

#nav li a.nav-prevparties {background-position: -307px 0px; width:280px; height:41px;}

#nav li a:hover.nav-prevparties {background-position: -307px -42px; width:280px; height:41px;}

#nav li a.nav-gallery {background-position: -587px 0px; width:169px; height:41px;}

#nav li a:hover.nav-gallery {background-position:-587px -42px; width:169px; height:41px;}

#nav li a.nav-aboutus {background-position:-756px 0px; width:193px; height:41px;}

#nav li a:hover.nav-aboutus {background-position:-756px -42px; width:193px; height: 41px;}

The layout is for a CMS system so I dont have a live version on a server but I can upload it to a test site if need be.

Any help would be greatly appreciated.

[mlogan78]

Hi wolfcry, I removed the float:left from the anchor and put it on the li as you suggested and it fixes the problem in IE.

Thankyou very much for your help it is most appreciated.

[Author]

Posts