Log in

View Full Version : IE6 ruins navbar. Works in other browsers. Need help!


ozzie123
08-19-2008, 04:44 PM
I'm working on a site which is almost complete and looks fine in all browsers except IE6. For some reason, IE6 adds spaces between each nav item and pushes the last nav item below the others. I have no idea how to fix this. The link can be viewed at http://www.kintera.org/site/c.mtJVJbMNIoE/b.4425983/k.BE93/Home.htm and the problem can be viewed in the attached screenshot.
TheJoshMan
08-19-2008, 07:59 PM
This is due to FF and IE having different ideas of how to define defaults in padding/margin. The easiest way to overcome this is to use "conditional statements"...

By using a conditional statement, you're telling the browser to apply certain styles ONLY if it is a certain browser. All other browsers will read out of the normal stylesheet.

Here is an example, you can edit and make adjustments as necessary to suit your needs.



<!--[if IE]>
.navbar{
background:#ff0000;
}
.navbar li{
padding:4px;
}
.navbar a{
color:pink;
}
.navbar a:hover{
color:blue;
}
<![endif]-->


Also, I failed to mention that since the Conditional Statement is in the form of a HTML comment, you cannot place it in the CSS. It must be placed in the HTML of the page (between <head> and </head>).