Background Color Problems - CSS

[aspekt9]

Everything displays correct in firefox but IE is throwing problems at me. I have multiple fieldsets nested inside divs to control each one individually and when I try to set the div background color to something it changes correctly in firefox but in IE it only colors a small 1px vertical line. Here's the site so you can take a look:


Also, why don't the divs line up correctly in each browser? It looks like the left divs in IE start higher for some reason, even though I have it set to margin:20px 0 0 0
Also it doesn't seem like the container is containing properly even though I have all my divs nested inside of it I have to set the background color inside of body { } or else just the background of the navigation and header div show up.

[jlhaslip]

It is a matter of semantic use of the "fieldset" tag, I believe.
http://www.w3.org/TR/html4/interact/forms.html#edef-FIELDSET
Fieldset is a tag used with 'forms', not lists.

Looks good, but it is simply the incorrect use of a tag and probably has IE chasing its quirks.

[Arbitrator]

For the sake of correct code and validation, you may want to fix your public identifier; they’re case sensitive.

"-//W3C//DTD XHTML 1.0 strict//EN"

[aspekt9]

It's all lower case :o

[aspekt9]

I think it's because with fieldset, it's a rectangle it doesn't cut around the legend part. But I don't get why it works in firefox but not internet explorer?

[aspekt9]

I figured it out but now the top div for the left section is all the way at the top in IE but correctly positioned in firefox, how can I fix this?

[Excavator]

Pretty sure it's the use of absolute positioning on legend ... I didn't download your whole site to test locally though.
What happens when you try : legend {
margin:-22px 10px;
color: #fff;
background-color:#781351;
border: 1px solid #781351;
padding: 2px 10px;
}

[aspekt9]

I used that and I got the same result. I added float:left; and it works now! thanks so much guys for all your help.