Question

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 how it looks in IE8, which is the correct way:

The one css property that doesnt seem to work in compatibility mode is the min-width, which Im assuming compatibility mode is an older version of IE? Or at least I am assuming this issue would happen in IE7. Here is the css property for this menu:

#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 how to get the older version if IE to work like how it looks in IE8?

EDIT:
Here is the image when adding display:block and width:70px. As you can see it cuts off, trying to have it automatically expand to the longest text in the menu like it would in IE8.

Answer 1

What will probably work best is to detect the widest element using JavaScript, then set the elements to that width – see jsfiddle (http://jsfiddle.net/NneMQ/). I checked in IE7 and it works as far as I understand your requirements.

The jQuery I used was:

    $(function () {
        var target = $('#main_menu li ul li');
        var target_array = [];
        target.each(function (i) {
            target_array[i] = $(this).width();
        });
        // get widest element and add 10px of padding on the right
        var max_width = Math.max.apply(null, target_array)+10; 
        target.find('a').css( { 'width': max_width + 'px', 'display': 'block' } );

    });

EDIT:

Good catch. I updated the code to work with multiple lists. It works in IE7 and in IE8 compatibility mode (which is designed to emulate IE7 anyway):

See http://jsfiddle.net/g_thom/NneMQ/1/

Updated jQuery:

    var target = $('#main_menu > li');
    var target_array = [];
    target.each(function (i) {
        $(this).find('li').each(function (j) {
            target_array[j] = $(this).width();
        });
        // get widest element and add right padding of 10 px
        var max_width = Math.max.apply(null, target_array)+10;
        target.eq(i).find('a').css( { 'width': max_width + 'px', 'display': 'block' } );
    });