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

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

Solution

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;
    }