Legend doesn't float left on IE7

Question

I am having trouble on IE7. I have following html format.

<fieldset class="wrapper">
    <legend class="ct">Legend </legend>
    <div class="ct">Div 1</div>
    <div class="ct">Div 2</div>
</fieldset>

And this is the css style

.wrapper .ct {
    display:inline-block;
    *display:inline; /*IE7*/
    float:left
}

when I test this on other browser it works fine but IE7 does not. Please see screenshot below. But if I use div instead legend then it works. Here is on Jsfiddle

Answer 1

Andres almost had it. Add a "*float: none" after the "float: left" and you should be good.

.wrapper .ct {
    display:inline-block;
    float:left;
    *display:inline;
    *float:none;
}​

Here's the updated fiddle

Answer 2

For IE7 only, try setting to display: inline (not inline-block).

Right, forgot how much a pain legend is. You likely need to use absolute position to place it as such - with a left margin on the others or padding-left on the parent. Depends on the design.

Answer 3

IE does not understand display:inline-block, you can use display:inline instead with a hack to target that browser alone, like so:

.wrapper .ct {
    display:inline-block;
    *display:inline;
    float:left
}