Display problem in IE8

HTML & CSS
1

Our CSS works great except in IE8. In Firefox and other versions of IE, the navigation items are lined up. But in IE8 the navigation menu at the top of the page wraps the last item (“Contact Us”).

Here is the part of the CSS that relates to the menu:

#navWrap {
text-align: left;
z-index: 10;
background: url(…/images/global/mainnav_background.gif) repeat-x;
margin: 0;
padding: 0;
width: 720px;
height: 27px;
clear: both;
}

#navWrap li a {
text-decoration: none;
color: #333333;
padding: 6px 30px 5px 10px;
background: url(…/images/global/mainnav_background+rule.gif) no-repeat right 0;
}

#contentcontainer {
text-align: left;
background-color: #fff;
padding: 0;
margin: 0 auto;
}

The CSS validates. Any suggestions about what I should look for or how to fix it?

Thanks,
Kathy

2

Thanks for the solution Philip! And thanks to both of you for the explanations.

I really appreciate your help!

3

Can you post a url.

if it will not let you put it in as

www dot mysite dot com slash path slash file

4

How strange. The solution is to put a margin and padding of 0px in the #navWrap ul selector.

#navWrap ul {
	margin: 0px;
	padding: 0px;
}

I think what is going on is that the UL is describe as being inline. Its LI elements are all floated. #navWrap is a container for the UL and all its LIs and has a fixed width. The LIs are floated in this area but IE8 puts the UL at the end but gives it a width because of the margin/padding (I not sure which). This will not fit within #navWrap so it puts it before “Contact Us” which is then float a bit down from the original alignment.

5

Some browsers use margin-left as a default space for the bullet and some use padding-left. You need to reset them both to zero (as shown in the post above) when you aren’t using bullets and set the bullet to list-style:none.

It breaks in IE8 because the padding on the ul just makes it too wide to fit on one line. Firefox and others push the inline element out of the other end of the div without breaking the display but IE8 tries to wrap as mentioned above.

(When floats are on the same line as an inline element then the inline element is moved aside to make room for the floats on that same line.)

6

Here’s the URL:
http://www.co.orange.nc.us/