Min-width issue in IE7?

I am using a drop down menu for a website and in IE8 it works just fine, but when I go into compatability mode the drop down menu looks wrong. The background color is only as wide as the text in each list element. Here is a image of the issue.

Here is the correct way, in IE8:

Here is the css style:


#main_menu li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    border:no-border;
}

#main_menu li ul li {
    float:none;
    display:inline;
}

#main_menu li ul li a {
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    min-width:70px;
}

Any idea to get this to work in older versions of IE?

Might be better to give a specific width for those LIs and/or <a>s, at least for IE7. Otherwise, choose a width fro the drop lists (placed on the UL, and set the widths of the LIs to 100%. To make the <a> fill each LI, place the required padding on them and set them to display: block.

The problem is the width is dynamic based on how long the text is. I would hate to have a huge empty space to the right if I had to guess what the longest text would be.

IE 7 is buggy when it comes to using min and max width, you can read about it here min-width (CSS property)

Fair enough. Well then, try putting the background color on the LIs instead of the <a>s, or set the <a>s to display: block to make the background color fill the whole LI.

Yeah I was able to do that, but dont I go back to square one because of the hover color is only as far as the width of the link? So if I set the background color of the UL to the gray, then it looks correct, but when I mouse over each link the hover width is as long as the width specified in the css.

OK, so the color has to be on the <a>s. In that case, set them to display: block. That will make the <a>s fill the whole LI.

In Ie7 and below the trick is to set display:block to the anchor but ensure that “haslayout” isn’t set (no dimensions or floats) and then also add position:relative to the anchor.

Here’s a very very old demo showing a fluid width dropdown based on the width of the text that you can copy from.