I'm trying to figure out the best workaround for this CSS menu in IE. It looks fine in FF (except that grey block I need to get rid of). The problem is added padding/space at the top of each block (except the first one). Any help is greatly appreciated! TIA Here it is in FF - and IE - Here is the CSS - #sidebar { float: left; width: 185px; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: #84A6A7; background: #84A6A7; border-right: 1px solid #84A6A7; } #sidebar h2 { color: #fff; background: #84A6A7; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; font-weight: bold; padding: 5px 0px 5px 10px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #35231C; } #sidebar ul { list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #sidebar li { list-style: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #sidebar ul li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #sidebar ul li a { display: block; color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 5px 10px 5px 12px; margin: 0px 0px 0px 0px; border-bottom: 1px solid #35231C; } #sidebar ul li a:hover { background: #B1C7C7; color: #35231C; font-weight: bold; text-decoration: none; } Code (markup):
The menu looks fine when I see it in IE 7, so I assume you were checking it in IE 6. If so, the problem is a bug in IE 6 that renders the white space between the ending </li> tag on one line and the opening <li> tag on the following line as a line feed creating the extra space. At the risk of getting beaten up by the CSS gurus who think using HTML formatting to control display problems is unacceptable, I'd suggest you try the ugly code method as a workaround. In your html code, change the nicely formatted list you probably have now to look like this instead: <ul><li><a href="#">Home</a></li ><li><a href="#">Services</a></li ><li><a href="#">Why Choose Us?</a></li ><li><a href="#">Getting Started</a></li ><li><a href="#">Free Assessment</a></li ><li><a href="#">About Us</a></li ><li><a href="#">FAQs</a></li ><li><a href="#">Resources</a></li ><li><a href="#">Employment</a></li ><li><a href="#">Contact Us</a></li ></ul> That removes the spaces that IE 6 treats as line feeds and makes it behave. Good luck.
Thanks for the reply. I was gone for the weekend. Yes it is IE 6. I was hoping for a CSS solution. I may just have to try out your "ugly code" method. I have not seen that one.
You can also try adding display:inline; under #sidebar ul li Also, to prevent having to declare the margin and padding for everything you can try using css global reset. saves time and minimizes your code drastically.
It doesn't matter, but to make it more organized, just put it on the top after your body code in the css.