IE fieldset rendering - html

Question

I have a form in an HTML page, works great in all browsers except IE. I know it has something with IE rendering the fieldset tag, and I have tried using a psuedo div to hack it, but that did not work. Anybody run across this or have a work around?
Here's a fiddle: http://jsfiddle.net/G9NSx/
&
Here's the code:
<form>
<fieldset>
<ol>
<li>
<label for="name">Name<em> *</em></label>
<input id="name" />
</li>
<li>
<label for="company">Company Name</label>
<input id="company" />
</li>
<li>
<label for="address">Address</label>
<input id="address" />
</li>
<li>
<label for="city">City</label>
<input id="city" />
</li>
<li>
<label for="state">State/Providence</label>
<input id="state" />
</li>
<li>
<label for="country">Country</label>
<input id="country" />
</li>
<li>
<label for="phone">Phone<em> *</em></label>
<input id="phone" />
</li>
<li>
<label for="fax">Fax</label>
<input id="fax" />
</li>
<li>
<label for="email">Email</label>
<input id="email" />
</li>
<li>
<fieldset class="regarding">
<legend>Regarding:<em> *</em></legend>
<label><input type="radio" name="regarding" /> Capabilities</label>
<label><input type="radio" name="regarding" /> Testing Information</label>
<label><input type="radio" name="regarding" /> Business Relations</label>
<label><input type="radio" name="regarding" /> Other</label>
</fieldset>
</li>
<li>
<label for="add-info">Additional Info.</label><br />
<textarea name="add-info"></TEXTAREA>
</li>
</ol>
<input type="submit" value="Submit"> <input type="reset" value="Reset"/><br />
<br />
<span class="bold">Required Fields<em> *</em></span>
</fieldset>
</form>
CSS:
form {
border: 1px solid #0066FF;
/*background-image: url(../images/form-bg.jpg);*/
background-color: #FFF;
}
form fieldset {
margin: 10px;
padding: 20px;
}
form legend {
padding: 0 2px;
font-weight: bold;
}
form label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
}
form fieldset ol {
margin: 0;
padding: 0;
}
form fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
form fieldset li textarea {
min-width: 300px;
max-width: 500px;
}
form fieldset fieldset {
border: none;
margin: 3px 0 0;
}
form fieldset fieldset legend {
padding: 0 0 5px;
font-weight: normal;
}
form fieldset fieldset label {
display: block;
width: auto;
}
form em {
font-weight: bold;
font-style: normal;
color: #0066FF;
}
form label {
width: 120px; /* Width of labels */
}
form fieldset fieldset label {
margin-left: 123px; /* Width plus 3 (html space) */
}
form fieldset ol li fieldset.regarding {
padding: 0px;
}
Here is a screenshot of the issue I am having in IE9

Answer 1

This seems to be one of odd bugs in IE 9. To circumvent it, add an empty div element, i.e. <div></div> before the form element. And the problem will probably go away automatically when you put the form onto a real page that has some content before it, like a heading.
Every now and then, IE does odd things with forms that appear at the very start of a document, or with elements that appear at the very start of a form. If you inspect the page on IE 9 (using F12), you can see that the problem only appears in “standards mode” (!), not in quirks (compatibility) mode. And style settings are largely lost.

Answer 2

What is the purpose of the outer fieldset? It lacks the legend tag. You could do without it (but then need to rewrite your CSS). While nested fieldsets are not a problem in IE according to my experience, you don't need the added markup and styling complexity unless all fieldsets have a legend.
Next time you could put your code in a fiddle for faster and more acurate answers.

Answer 3

Added this CSS class, see if this is what you wanted to achieve
fieldset, img, .regarding{
border-width: 1px;
border-style:solid;
border-color:red;
}
updated the fiddlehttp://jsfiddle.net/9F2eB/
I know this is not the ideal "highly optimized" way of writing, but if this is the desired effect you want to produce, take idea and run away with it.