Web page looks good in FF but IE shows 1 error?

in IE, why is the navbar all screwed uyp?
Is it the right border on the last li?

Thanks…

Hi,

The nav is broken in all browsers as fas I can see and the last item wraps to the next line.

You can’t make x number of items fit along the length of a navbar exactly by using the length of the text-size and padding. Some browsers will render text much wider than others so its a flawed approach. You should allow at least 50px of breathing space to account for the differences which would mean putting the ribbon effect on other elements and not making the text fit so tightly along that nav.

You could alternatively use display:table display:table-cell (ie8+) to fill the whole line equally without requiring padding.

A quick fix would be to not float the last element and set it to overflow:hidden and text-align:center. This means that no padding is needed on the last item and gives a few pixels of breathing space.

e.g.


#smoothmenu1 > ul > li:last-child {
float:none;
overflow:hidden;
text-align:center;
display:block;
position:static;
}

#smoothmenu1 > ul > li:last-child a{
padding:8px 0;
}

For older browsers you would need to add a class to the last list item instead of using first-child and apply the styles above via that class.

I took off the left/right padding a gave each li a seperate width, and put the right nub on the ul instead of the li which seems to work, is that ok?

Yes that will allow you a little leeway with text size and maybe even text resize. (Always try zooming the text just to see what will happen if text runs to longer than you think.)