Remove left pad from legend item

I want the fields and divs to keep the content visually equal. I am using 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 is slightly indented. I tried to remove the indentation, margin and indentation of the text.

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 any other properties that I'm missing here that can help solve the problem?

http://jsfiddle.net/DBhQb/

+3
source share
2 answers

The HTML5 template CSS file legendis specified as follows

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

*margin-left: -7px; should do the trick as it breaks CSS for IE <8

+7
source

try it

fieldset , legend{ padding:0px; margin:0px;}
0
source

All Articles