Legend doesn't float left on IE7

Go To StackoverFlow.com

0

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 enter image description here

2012-04-05 00:03
by Dips
Why would you use a legend element here? legend is used to provide the description of elements inside a fieldset and should (afaik) not be used outside fieldsets. I think a heading element (such as h2) is more appropriate here. legends are really difficult to style as well, that's why I'm confused as to why you'd make it harder for yourself - powerbuoy 2012-04-05 00:18
That's not valid HTML, the legend element is meant for fieldsets. Contexts in which this element can be used: As the first child of a fieldset element.steveax 2012-04-05 00:19
I know what u mean. It is actually inside fieldset where divs are layering with legend. This is kind of format in CMS and I can't change - Dips 2012-04-05 00:20


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

2012-04-05 03:29
by ralgh


0

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.

2012-04-05 00:11
by NICCAI


0

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
}
2012-04-05 00:14
by Andres Ilich
That doesn't work either. only works if I use div instead legen - Dips 2012-04-05 00:15
@user1193749 cam you post a test case on http://jsfiddle.net - Andres Ilich 2012-04-05 00:48
Here is the linkDips 2012-04-05 00:49
@user1193749 Then use a div, or another suitable element. As @powerbuoy says in his comment, you shouldn't be using a legend tag - Bojangles 2012-04-05 01:05
well, this is system generated format so I can't change the markup - Dips 2012-04-05 01:13
Ads