LI is stretching to the full page width in IE7 but is fine in Chrome

Question

I have created a menu in that is contained in t div. The menu displays well when running in Chrome, but stretched all the LI items in IE7

I just can't get my head around this one.

A sample can be found at http://jsfiddle.net/uMASt/. The page loads correctly on jsfiddle but not on my HDD

Thanks! Ian

Answer 1

Since it's impossible to see what's going wrong when it loads correctly on jsfiddle, even in IE7, I could just give it a hopefully qualified guess... IE7 lives it own life and needs some extra attributes sometimes, IE only attributes starts with an asterisk.

Try adding *zoom:1; *display:inline; to your li elements, see below.

 #menu li {            
        display:block;
        float:left;
        border-top:1px solid #CCC;
        text-transform:uppercase;
        width:auto;
        *zoom:1;
        *display:inline;
    }
    #menu li a {
        padding: 10px 15px 10px 25px;
        display:block;
        height:50px;
        text-decoration:none;
        color:#FFF;
        *zoom:1;
        *display:inline;
    }