Problem with nav bar in IE (7)

HTML & CSS
1

Hello all,
im working on a small site and im using sprites for my nav bar, it works in all browsers except in IE (7)

Like can be seen in the link below the links in the nav bar are half shown as hover state and half as normal (even without hovering) in IE
http://sospets.brinkster.net/

how can i get it fixed? thanks for the help

2

infact, i just noticed that in IE all the right side is so wrong, there’s white space aswell below the logo and unwanted spaces between the links

3

Hi,

To cure the gaps between the list items you should float them in IE as this kills the whitespace bugs that creep between the elements.

The gap under the header is because you added 150px padding top for your image but you have no text content so IE7 allows room for the current font size also. Just set a height that you need and don’t use padding unless you are adding some text content underneath.


ul#cssnav li{float:left;width:100%}
ul#cssnav li a{float:left;width:220px}
.left{display:inline}/ ie6 double margin fix*/
#header{overflow:hidden;padding:0;height:150px}
4

thanks paul, that solved it :slight_smile:

5