Question

I’m creating a form and ran into a padding problem with fieldsets. While all looks ok in Opera, FF and Chrome, both IE 7 and 8 simply throw away any top padding inside the fieldset. The following code correctly adds padding to the left, bottom and right of the fielset (although the latter causes this known problem), but positions the first line of content directly underneath the legend with no spacing:

<form>      
  <fieldset style="padding:30px;">
      <legend>Legend</legend>
      <label for="input">Label</label>
      <input type="text" id="input" />  
  </fieldset>    
 </form>

However, this answer to another question pointed me towards the legend tag and indeed, if I leave it out, everything is fine.

So my question is:

Is there a work-around to have both the legend tag and the padding? My quick top-of-the hat attempt (margin-top on the first element) does not have an effect.

Or do I have to forego the (semantically correct) legend tag and replace it with something (more arbitrary) like a heading? What concequences does this have for screen-readers?

Answer 1

Would it work to remove all the padding from the fieldset and instead create a div inside the fieldset that adds the padding?

<form>
  <fieldset>
      <legend>Legend</legend>
      <div style="padding:30px;">
         <label for="input">Label</label>
         <input type="text" id="input" />
      </div>
  </fieldset>
</form>