horizontal rollover menu driving me vertically up a wall!

[Deleted User 234324]

Been trying now for over an hour to get this damn horizontal menu to work in IE7 and i just cant figure it out. In FF its centred and the buttons are displayed correctly (the full! button) when hovered over the buttons the new ones display as it should do.

In IE7 (not even looked at IE6 yet!) the menu is not centred and the buttons are only span the width of the text not the width they should be.

Any help would be much appreciated in this matter before I break something!

menu-bg.gif is a 1x32 pixel image set to repeat on the x-axis.
menu-buttondk.gif and menu-button.gif are 78x26 pixel images.

<-- HTML -->

    <div id="menucontainer">
          <ul id="menulist">
            <li><a href="#"><span>Demos</span></a></li>
            <li><a href="#"><span>Menus</span></a></li>
            <li><a href="#"><span>Layouts</span></a></li>
            <li><a href="#"><span>Boxes</span></a></li>
            <li><a href="#"><span>Mozilla</span></a></li>
            <li><a href="#"><span>Explorer</span></a></li>
            <li><a href="#"><span>Opacity</span></a></li>  
        </ul>
    </div>

<-- CSS -->

#menucontainer {
    width: 100%;
    height: 32px;
    background: url(images/menu/menu-bg.gif) repeat-x bottom;
    font: normal .94em/26px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

#menucontainer ul {
    margin:0 auto;
    padding:0;
    list-style:none;
    display:table;
}

#menucontainer li {
    text-align: center;
    display:table-cell;
    float:left;
    min-width: 78px;
    padding: 3px 5px 3px 5px;
}

#menucontainer li a {
    display:block;
    position:relative;
    background:url(images/menu/menu-buttondk.gif) no-repeat;
    text-decoration:none;
    color:#dcdcdc;
}

/* not for IE5.x or IE6 */
#menucontainer li a:hover {
    background:url(images/menu/menu-button.gif) no-repeat;
    color:#fff;
}

Muchos gracias to anyone that can offer a helping hand

 

[Deleted User 234324]

managed to scavange some site hosting from a m8, so uploaded the menu and required files.

www.pixelgangsta.com/template.html

As you can see, fine in firefox but IE 7 (not even looked at IE6) is retarded.

 

[Deleted User 234324]

Yeah I can understand the fixed design thing, unfortunately 800 as a fixed width on a 1920 monitor is tiny

EDIT: Ok set it to a fixed 800 width and managed to solve the button issue in IE (tops cut off) turns out position: relative wasnt needed at all.

Now to get it centered in IE7 (and IE6)

 

[Deleted User 234324]

nope doesnt work in IE7 tried it everywhere, if i remove the float: left; then it can center the menu in IE7 problem then is its no longer horizontal, it becomes vertical.

Wish M$ would hurry the **** up and get IE CSS 2.1 compliant atleast.