Navigation bar collapsing in IE 7

I designed a simple horizontal bar in CSS for my site and its fine in all browsers, except IE6 and IE7. I read somewhere that IE doesn’t like “block” and “float” properties, but this is the only way you can force your navigation in vertical line. Could anyone help please. This is my CSS code for my navigation.

#navigation {
height: 50px;
width: 800px;
float: left;
border: 1px solid #006;
background-image: url(Images/navigation_transparent.png);
margin-top: 20px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation ul li a {
text-align: center;
display: block;
padding: 10px;
float: left;
height: 20px;
width: 120px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
overflow: hidden;
zoom: 1; /* for IE 6 */
}

Hi Jenny, welcome to Sitepoint :slight_smile:

Please post the HTML code as well.
You may need to float the ul and li elements left as well.

Float the li too

Yes you must float the list element in IE otherwise it takes up space and you get each item dropping down a line (or set the list item to display:inline if you are not using it at all - but float is generally safer).

Thanks Mark!
Its working now even in IE6!!!

Thanks Eric!
It’s working now even in IE6!!!

Thanks Paul!
It’s exactly what happens with my navigation bar. Now after I added just one line of code for li it works perfectly even in IE6!!!