title: Default CSS values for a fieldset <legend>
body: <p>I'm trying to use a <code>&lt;legend&gt;</code> as a title inside a <code>&lt;fieldset&gt;</code>.</p>
  
  <p>In browsers other than IE, the <code>&lt;legend&gt;</code> is positioned on the top border of the <code>&lt;fieldset&gt;</code>, with the text perfectly centered on the line.</p>
  
  <p><img src="https://i.stack.imgur.com/IyOrK.jpg" alt="alt text"></p>
  
  <p>I'm trying to reset it's position so that it sits just like any other element. i.e. an <code>&lt;h3&gt;</code>.</p>
  
  <p><strong>Here's the CSS I have so far.</strong></p>
  
  <pre><code>fieldset legend {
      margin: 0;
      padding: 0;
      position: static;
      border: 0;
      top: auto; left: auto;
      float: none;
      display: block;
      font-size: 14px;
      line-height: 18px;
  }
  </code></pre>
  
  <p>But the <strong><em>legend</em></strong> is still perfectly centered on the line.</p>
  
  <blockquote>
    <p>Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.</p>
  </blockquote>
  
  <p><strong><em>Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)</em></strong></p>
  
  <p><strong>Update</strong>
  I'll leave this question open for another week just in case someone HAS been able to style <code>&lt;legend&gt;</code> elements. If no solutions are found I'll accept @jnpcl's answer.</p>