Question

Hi I have tried for 2 hours everything that I could find on the net with this to no avail. So my last hope resides here.
You can check the site at:
http://webofdreams.ro/vworker/finemaid/finemaid.html#
the navigation is overview and services.

html:

        <div class="contentNav clearfix">
        <ul class="clearfix">
            <li><a class="show1 navButton" class="left" id="activeLink">Overview</a></li>
            <li><a class="show2 navButton" class="right">Services</a></li>
        </ul>
        </div>

css:

.clearfix {clear: both;}
.contentNav {
    color: #ddd !important;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
    display: block;
    text-align: center;
    }
.contentNav a { 
    color: #fff !important;
    }
.navButton {
    font-size: 18px !important;;
    padding: 5px 15px;
    background: rgb(122,188,255); /* Old browsers */    
    }
.contentNav li {
    display: inline-block;
    }
/*IE specific css*/
.navButton {
    zoom: 1;
    *display: inline;
    }
.navButton a {
    zoom: 1;
    *display:inline;
    }
.height {
    height: 45px;
    clear: both;
    }

Answer 1

IE only supports display: inline-block for elements that are natively inline. <li> elements are natively block, so in IE, you need to keep it as display: inline, but trigger hasLayout on the element, like so:

display:-moz-inline-stack;  /* only for older mozilla browsers */
display:inline-block;
zoom:1;  /* triggers hasLayout */
*display:inline;  /* resets element to inline for IE */

Here’s the article I found this solution on some time ago:

Cross Browser Support for inline-block Styling

That said, I’ve never tested this in IE6, because IE6 is 11 years old and shouldn’t be supported anymore. But it’s worth a shot. The article was written in ’07, so he may have tested in IE6