ie7 display:inline

I know this question has been asked a hundred times, and I feel like I've looked at all 100 posts, but this is driving me nuts.

I swear this is the last IE7 compliant site I will ever do. Too much money wasted. I invite you to do the same. I'm still waiting for my check from Microsoft as a sorry for all the money you've lost developing to our piece of crap software.

Anyways! Had to rant.

Question is, display:inline is not a开发者_运维百科cting right for me. I'm running through IE7 edit for this page: http://www.buxback.com/ and the header navigation is just doing some strange things I can't wrap my head around.

If you hover over HOW IT WORKS (in ie7 of course) you will notice two white bars on either side of the page and a sub menu. There is something (supposedly) that is causing that middle div, which contains the text, to act as a block element. I assume it's that middle div. I'm at a complete loss.

If you look on firefox you can see how it is suppose to act.

Any help would be appreciated.

Thanks!

It seemed that I needed to make almost everything have a position:relative, display:inline, zoom:1 for internet explorer ie7.

Ya know, when GM makes a bad product, they do a recall. Why won't Microsoft do a recall on IE6 and 7?

Firstly, JavaScript error in Ffox:

"Error: browser is not defined
Source file: http://www.buxback.com/wp-content/themes/buxback/js/fontreplace.js?ver=1.0
Line: 1"

Best fix that up before trusting any browser with any further negotiations!

Nextly (o man this page is slow to load and respond), I would recommend using absolute positioning for the nested elements, and relative positioning on any nested element's parent container. This will take the menus out of the flow of the document and also allow you to assign them z-index properties - because your menu currently open beneath the Flash advertisement for UPS (right hand side).

Again, this page menu is incredibly slow to respond across several browsers, you might need to investigate why - perhaps you have alot of event listeners needlessly running? Maybe too much processing during the mouseover event? I think I saw the 'loading' symbol on IE7's page tab whenever I moused over a menu item - so there's some server work going on each time.

Lastly, don't ever load up your page in IE6 :P

Ok, so here's the exact way to get a list centered horizontally in IE7 (and all other browsers).

Demo - http://jsfiddle.net/iamtyce/XH2A6/.

HTML

<div id="menu-outer">
    <div id="menu-table">
        <ul id="horizontal-list">
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
        </ul>
    </div>
</div>

CSS

div#menu-outer {}

div#menu-outer div#menu-table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
    padding: 10px;
}

ul#horizontal-list {
    margin: 0 4px;
    padding: 0;
    list-style: none;
    text-align: center;
}

ul#horizontal-list li {
    display: inline;
    position: relative;
    zoom: 1;
}

ul#horizontal-list li a {
    text-decoration: none;
    padding: 6px 10px;
    color: #818181;
    background: #f5f5f5;       
}

ul#horizontal-list li a:hover {
    color: #515151;
    background: #e5e5e5;  
}