Remove left padding from legend element

css, html

Solution

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

Problem

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/

Original source