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
legend
element is meant for fieldset
s. Contexts in which this element can be used: As the first child of a fieldset element.steveax 2012-04-05 00:19
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;
}
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.
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
}
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
legend
element here?legend
is used to provide the description of elements inside afieldset
and should (afaik) not be used outsidefieldset
s. I think a heading element (such ash2
) is more appropriate here.legend
s 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