CSS: table and table-cell replacement for IE7

Question

http://jsfiddle.net/vByVD/9/

This what i have. The menu looks right is horisontal in most browsers. But in IE7 and lower ofcourse it is something else, it is vertical there.

I found out this is because they dont support table, table-cell.

I tried some hacks as you can see in the first lines in the CSS, but it does not quite work, this do only show 3 li horisontal and then it makes new line and show the other li's.

I want it to appear as the other new browsers, so its one line horisontal.

How can i make this work?

Answer 1

There are two ways to accomplish this. The first:

#header-nav{
    overflow: hidden;
    zoom: 1; /* IE6 and below work around */
}

#header-nav li{
    float: left;
    margin: 0;
    padding: 0;
}

#header-nav li a{
    display: block; /* if you want height and width */
    }    

The second:

#header-nav li{
    margin: 0;
    padding: 0;
    display: inline;
}

Personally I use the first of the two as it provides a bit more control for styling a block for color, width, height, margin, padding, etc. Plus, when you do a:hover the entire box is a link; not just the text. My recommendation is to not use tables. The results are unpredictable as you have seen. Not to mention, now its easier to add sub-menu's, using JQuery or CSS.