CSS variable width tabs in IE6

I'm using control.tabs to control my tab behaviour, but my CSS isn't happy in IE. In FF and Safari, tabs get an automatic width and are floated left, whereas the same code in IE results in every tab being the full width of the whole bar, resulting in a vertical stack of tabs rather than a usual tab bar.

Here the CSS that matters:

#tabs {
    padding:0;
    clear:both;
    height:1.25em;
}
#tabs li {
    list-style:none;
    float:left;
    margin-left:0px;
    margin-right:3px;
    text-align:center;
    font-weight: bold;
    font-size: 1.5em;
    height: 1.4em;
}
#tabs li a {
    display:block;
    height:1.25em;
    padding: 0px 4px 3px 4px;
    background-color:#fff;
    color:#666;
    border: 1px solid gray;
    border-bottom: 0px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
    outline: none;
}

These look fantastic in Safari, a bit less so in FF, horrible in IE. For the purposes of the problem, the "shiny bits" can probably be safely ignored. Tab heights are a little mysterious, but these values seem to work.

I can get vaguely normal tab shape by setting a fixed width for each tab, but that makes the whole bar too wide.

Anyone have some CSS for automatic-width tabs that also work in IE?

Posted February 4th, 2008 at 7:10pm by Synchro