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

 

[Tripnologist]

Do you have this online somewhere?
Or can you upload your button images?

 

[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.

 

[unwashed potato!]

not even looked at IE6

don't until i tell you it's safe, or atleast safer

brb going to have a look now

from what i can see its to do with the lack of height and the width being 100%. imo for ease you should make the site have fixed heights and width, so make it 800px rather then 80%, and give eveything the height and width they should have. Then when it's working all fine in the browsers change each bit back to being a fluid design one at a time, so start with the width of the site, then the header, then the content etc. From what i can see it might not just be one small bit you have wrong, but instead a few as each are changing dpeending on size etc.

maybe someone will come along and say this is what you have done wrong, but just my opinion that a fixed design is much easier t work from at first.

 

[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)

 

[unwashed potato!]

without looking at the code again,

text-align: center;

?

800 was an example, set to wahtever but just as long as it's fixed you can then work the rest

 

[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.