Fieldset - IE 7 problem

HTML & CSS
1

The fieldset does not center align in IE7 and when there are more of them the top one goes off to the right
This works well in IE8 , chrome & firefox. Any ideas for the css? I have lots of pages using this kind of structure so can’t really change the HTML now.
I need this working in IE7 & I can’t use fixed widths.

Thanks in advance.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#Container {width:90%;border:solid black 1px;margin-left:auto;margin-right:auto; }
.FieldGroup{width:90%; margin-top:20px; margin-left:auto;margin-right:auto;}
</style>
</head>
<body>
<div id="Container">    
   <fieldset class="FieldGroup"><legend>Field 1</legend>
            <p>First field set content</p>
   </fieldset>
   <fieldset class="FieldGroup" ><legend>Field 2</legend>
            Second field set content</p>
   </fieldset>
</div>
</body>
</html>
2

Never mind.
I am putting a temporary fix for now by adding conditional stylesheet for IE7 & using fixed margin on the left. Atleast it looks decent.

3

Hi,

Since you have a 90% width and auto margins you can set the fieldset as display:block to fix IE7.
No need for a conditional stylesheet.

.FieldGroup {
    [COLOR=#0000cd]display:block;[/COLOR]
    width: 90%;
    margin: 20px auto 0;
}
4

Thanks a lot. That works great.