title: Remove left padding from legend element
body: <p>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:</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;legend&gt;Hello world!&lt;/legend&gt;
      &lt;div&gt;Lorem ipsum&lt;/div&gt;                
  &lt;/fieldset&gt;
  &lt;div&gt;
      &lt;h3&gt;Hello world!&lt;/h3&gt;
      &lt;div&gt;Lorem ipsum&lt;/div&gt;                
  &lt;/div&gt;
  </code></pre>
  
  <p>In IE7 the legend element it slightly indented. I've tried to remove padding, margin and text-indentation.</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Are there other properties I'm missing here, that can help solve the problem?</p>
  
  <p><a href="http://jsfiddle.net/DBhQb/" rel="nofollow">http://jsfiddle.net/DBhQb/</a></p>