title: Problems with solid fieldset border in IE8
body: <p>I wish to style my fieldsets so that they have a solid border.</p>
  
  <p>So I styled it like this...</p>
  
  <pre><code>fieldset {
      margin: 5px;
      padding: 20px;
      border: solid orange;
      border-width: 30px 1px 1px 1px;
  }
  
  fieldset legend {
      background-color: orange;
      line-height: 30px;
      /* uncomment line below for IE8 */
      /* margin-top: -50px; */
  }
  </code></pre>
  
  <p>And it looks like this on most browsers (IE9, Chrome, FF14) ...</p>
  
  <p><img src="https://i.stack.imgur.com/FKF2f.jpg" alt="how it should look"></p>
  
  <p>I have problems getting this to work on IE8. I have added a -ve margin to align the legend properly but there are still 2 vertical white bars each side of the legend that I cant get rid of... </p>
  
  <p><img src="https://i.stack.imgur.com/zSaVi.jpg" alt="on MSIE8"></p>
  
  <p>Fiddle...
  <a href="http://jsfiddle.net/spiderplant0/NmwuC/" rel="nofollow noreferrer">http://jsfiddle.net/spiderplant0/NmwuC/</a></p>
  
  <p>Any ideas how to get rid of the white bars on IE8 (I dont care about IE7, IE6 etc)?</p>
  
  <p>(By the way, the HTML is generated by the Drupal framework so I'd prefer a solution that doesnt involve changing the HTML.)</p>