<li> menu not displaying right in IE6

[babrees]

http://www.funkthis.com

Perfect in FireFox, but in IE the left and right column menu links (which are <li>) are indented. This looks to be the reason it is then pushing the right hand column down below everything.

html....

<div class="menubox">
Welcome Guest
<ul class="menu">
<li><a href="{DIRURL}/index.php?action=userlogin">Log-in</a></li>
<li><a href="register.php">Register</a></li>
</ul>

CSS...

/* START MENU */

.menu ul{margin:0px; padding:0px;}

.menuhead {
font-size: 14px;
display: block;
color: #000000;
font-weight: bold;
text-align:center;
background-color:#DFD9BB;
border: #C1B67D solid 1px;
}

.menubox {
background-color:#FFFFFF;
width:160px;
margin-bottom:7px;
padding:5px;
}

.menu {
color:#565452;
font-weight:bold;
padding:0px 0 4px 0px;
}

.menu li {
display: block;
border-bottom:1px solid #dbd4b4;
list-style: none;
}

.menu a {
text-decoration:none;
color:#565452;
display:block;
padding:3px 14px 3px 0;
}

.menu a:hover {
color:#CC0000;
}

.menu li:hover,
.menu li a:hover{
background-color:#FBF2E3;
}
/* END MENU */

TIA
Jill

[dtm32236]

I'm not sure why this is.... but a simple solution would be to use the ie underscore hack

From this page:

The Underscore Hack

The underscore hack is particularly useful if you only have a few minor things that need adjustments. It’s also useful since you can keep your IE CSS with the real CSS, making it easier for adjustments down the road. Now you’re probably wondering how the underscore hack works.

Let’s say you a class called text, and you want to apply a 10 pixel margin to that text. The 10 pixel margin looks great in every browser but IE. To make IE look better you think it needs a 15 pixel margin. To accomplish that you need to give IE code that only it will understand. This can be done by the following code:

.text {
margin: 10px;
_margin: 15px;
}

This hack works because IE is stupid. An underscore in CSS acts as a comment for that attribute only, and all browsers but IE honor this. Since IE doesn’t follow the underscore rule, placing the same attribute with an underscore after the real attribute will redefine that attribute for IE, while all other browsers will skip the second redefined attribute. Ah, using IE’s stupidity to solve IE stupidity. Brilliant!

[babrees]

Thanks but I'm afraid I don't really understand the remedy. I don't have margins assigned to the menu.

[dtm32236]

You can apply the underscore to anything.... margin, padding, well... any CSS property.

So, you can do something like:

.menu li {
display: block;
border-bottom:1px solid #dbd4b4;
list-style: none;
_margin-left:-15px;
}

and it will pull the list 15px towards the left in IE, making it look correct. I haven't tested this on your site, but try margin and padding on different parts of the list (maybe on the UL itself, or on the LI, etc).

[ejg]

The problem is that you are zeroing out the margins and padding in this line

.menu ul {margin:0px; padding:0px;}

That would work if you had

<div class="menu">
     <ul> ...
            <li></li>
     </ul>
</div>

where your <ul> is inside a menu div but you have the class applied to your <ul> so you need

ul.menu {margin:0px; padding:0px;}

[babrees]

Thanks dtm32236 - didn't get to try the underscore as ejg's remedy fixed the problem

ul.menu {margin:0px; padding:0px;}

That did it! Thanks.