Question

I want fieldsets and divs containing content to be visually equal. I use YUI 3.4.1 reset CSS and I have the following markup:

<fieldset>
    <legend>Hello world!</legend>
    <div>Lorem ipsum</div>                
</fieldset>
<div>
    <h3>Hello world!</h3>
    <div>Lorem ipsum</div>                
</div>

In IE7 the legend element it slightly indented. I’ve tried to remove padding, margin and text-indentation.

fieldset,div{ 
    background-color: red;
    width: 200px;
    padding: 0;
    text-indent: 0;
    margin: 0;
}
legend,h3{ 
    background-color: yellow; 
    width: 200px; 
    display: block;
    padding: 0;
    text-indent: 0;
    margin: 0;
}

Are there other properties I’m missing here, that can help solve the problem?

http://jsfiddle.net/DBhQb/

Answer 1

On CSS file of HTML5 boilerplate legend is styled in this way

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

*margin-left: -7px; should make the trick, since it’s a css hack for IE<8