[SOLVED] fieldset bg color display error in IE7

[MP145]

Hi guys,

 

I have set a background color to my fieldset in a form. It works like a charm in FF3.05, but on IE7 the background color extends above the fieldset border. Can this be rectified ?

 

Here is my code :

 

Css:

fieldset {
border: 1px solid #313325;
background-color: #cbcbcb;
padding: 10px;
margin-bottom: 20px;
}
legend {
color: #fff;
background: #313325;
border: 1px solid #4d4f40;
padding: 2px 6px;
}

 

Html:

<fieldset>
<legend>CONTACT INFORMATION</legend>
<div class="fieldwrapper">
<label for="name" class="styled">Your Name:</label>
<div class="thefield">
	<input type="text" id="name" value="" size="30" />
</div>
</div>
</fieldset>

 

Thanks.

[phparray]

Here you go.

 

 

This article explains it well.

 

 

http://www.mattheerema.com/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/

[MP145]

Brilliant!!!

 

Thank you very much for the reply phparray 

 

Apparently the holly hack doesn't work, so had to load a diff css file with conditional statement.

 

This is my working code now :

 

Separate Css from the one above

fieldset {
position: relative;
margin-top:3em;
padding-top:2em;
}
legend{
position:absolute;
top: -1em;
left: .5em;
}

 

on the html page

<link href="formstyle.css" rel="stylesheet" type="text/css" />
<!–-[if gt IE 6]>
  <link href="formstyleie.css" rel="stylesheet" type="text/css" />
<![endif]–->

 

and it works. As Matt would have said again "Voila!!!"