Sureblue Studios: Lounge: Lab

`FIELDSET` and `LEGEND` styling problems in IE

Internet Explorer 6 (XP) does not properly display styling in relation to FIELDSET when paired with LEGEND.

Here is a nice and simple form:

Here is a screenshot from Mozilla:

screenshot of properly displayed form

And here is the screenshot from Internet Explorer:

Note the lack of padding and the way the FIELDSET background color leaks out over the top and into the LEGEND.
screenshot of improperly displayed form

Here is the form code:


<form method="post" action="">

<fieldset>

<legend>Extra Credit ></legend>

<p>

<label for="burn">Trogdor should next burninate:</label><br />

<input

 type="radio" 

 tabindex="1"

 accesskey="i"

 value="Internet Explorer"

 name="burn"

 id="burn"

 checked="checked" />

 Internet Explorer<br />

<input

 type="radio"

 tabindex="2"

 accesskey="n"

 value="Netscape 4.x" />

 Netscape 4.x</p>

<p><label for="bill">How much should I bill M$ for all the extra time involved?</label>

<select tabindex="3"

 onblur="this.style.background='#e6f0fe';"

 onfocus="this.style.background='#f9fbff';"

 name="bill"

 id="bill">

<option value="money">47 million dollars</option>

<option value="beer">a bottle of beer</option>

<option value="tears">a vale of tears</option>

</select></p>

<p>

<input 

 type="submit" 

 tabindex="4" 

 accesskey="s" 

 value=" like this button does anything "
 
 class="button" />

</p>

</fieldset>

</form>

Here is the relevant CSS: