Hi
In ie, the background color of a fieldset seeps out from above. It does not in mozilla or opera etc.
Is there any solution? preferably a css solutiuon.
Thanx
Hi there mistaya123,
have a look at this example which you should be able to adapt to your own situation…
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
margin:10px;
background-color:#336;
}
#myform {
width:224px;
padding:20px;
border:1px solid #000;
margin:auto;
background-color:#999;
}
#myform fieldset {
padding:10px;
border:1px solid #000;
background-color:#ccc;
color:#000;
}
#myform legend {
border:1px solid #000;
padding:5px;
margin-left:20px;
background-color:#ffc;
font-size:0.8em;
color:#300;
}
#myform input {
display:block;
width:200px;
margin:0 auto 10px;
}
</style>
<!--[if IE]>
<style type="text/css">
#myform {
padding-top:35px; /* this value may need fine tuning !!! */
}
#myform fieldset {
position:relative;
padding-top:20px; /* this value may need fine tuning !!! */
background-color:#ccc; /* same background-color as body or container background-color*/
}
#myform legend {
position:absolute;
margin-top:-36px; /* this value may need fine tuning !!! */
margin-left:10px; /* this value may need fine tuning !!! */
}
</style>
<![endif]-->
</head>
<body>
<form id="myform" action="#">
<fieldset>
<legend>this is a legend</legend>
<input type="text">
<input type="text">
<input type="text">
</fieldset>
</form>
</body>
</html>
[/color]
coothead
You can only fight it and fake it, that seepage is always there. If you click that link, right at the top there’s mention of an update. Read that too, but both articles are good. Legends are a pain to style, but for me, mostly in Mozilla.
Thank you Alex. You took time to study my code.
You are right about the headings. Actually the h1 can be just ignored because i have to only take the “form” code and copy/paste somewhere else.
I was just testing the styles and found out the color seeping issue.
With your code, the legend comes inside the dotted border. But I want the legend to sit in the middle of the dotted line, like it does with my code above.
The main problem is to stop the color from leaking out the top of fieldset (while keeping the legend in the middle of the fiedlset border please?).
I hope there is a solution to the color seeping issue this way. 
If I understand your question then I would say it’s not an error. The legend is supposed to sit in the middle of the fieldset border. (Does in Opera here, too) The fieldset is kind of like a group for form elements and the legend is kind of the label for the group. Each form must have at least one fieldset.
I think the issue can be easily resolved my adjusting some of the styling. I also see some excess and unnecessary markup. I’m going to rewrite this as an example for you – be back in a few minutes.
EDIT:
Okay, I quickly threw this together for you…
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"
/>
<link
type="text/css"
rel="stylesheet"
href="style.css"
media="screen,projection,tv"
/>
<title>
Contact Us
</title>
</head><body>
<h1>Website Name</h1>
<form method="post" action="#">
<fieldset>
<legend>Contact Us</legend>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" />
<label for="address">Address:</label>
<input type="text" name="address" />
<label for="inquiry">Your Inquiry:</label>
<textarea id="inquiry" name="inquiry"></textarea>
<input type="submit" name="btnsubmit" class="submitButton" value="Submit" />
</fieldset>
</form>
</body></html>
CSS:
/* Start Reset - null margins and padding */
html,body,address,blockquote,div,form,fieldset,caption,
h1,h2,h3,h4,h5,h6,hr,ul,li,ol,ul,table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
font:normal 85%/140% arial,helvetica,sans-serif;
}
h1 {
padding:10px;
}
h2 {
padding:10px;
}
form {
width:50%;
margin:0 auto;
border:1px dotted green;
background:#DDFFE6;
padding:10px;
}
legend {
font-weight:bold;
padding-bottom:10px;
}
input {
display:block;
margin:3px 0 10px;
}
.textareaWrapper {
width:100%;
}
textarea {
display:block;
width:99%;
margin:0 auto;
height:100px;
}
.submitButton {
float:right;
margin:10px 0 0;
}
Note that I made a few minor adjustments visually.
I’ve removed a lot of styling from form elements since they don’t tend to perform well across browsers.
I’ve removed the unnecessary paragraph (P) tags.
I styled the form rather than the fieldset in order to make the legend appear within the form.
I’ve stripped most of the unnecessary ID’s and classes from the elements.
I’ve also changed the h1 to the website name. I was going to put h1 as the website name and h2 as “Contact Us” but honestly it’s redundant to the legend and page title. If you so choose to add the Contact Us heading back in, you should have it as a subsection of the h1 which is the site name. (In other words, the Contact Us heading should semantically be a h2 as it is a sub-heading of the site title, or H1)
Anyway, best of luck.
Stupid SitePoint cut me off from editing my last post – please ignore .textareaWrapper in the CSS - it was unnecessary in this case.
It is just a form html only. Not within a web page or anything. I can give you the code. Its quite simple.
<h1>Contact Us</h1>
<form method="post" action="#">
<fieldset>
<legend>Contact Us</legend>
<p>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname" class="txt" />
</p>
<p>
<label for="address">Address</label>
<input type="text" name="address" id="address" class="txt" />
</p>
<p>
<label for="inquiry">Your Inquiry:</label>
<textarea id="inquiry" name="inquiry" class="txtarea" rows="6" cols="30"></textarea>
</p>
<p>
<input type="submit" name="btnsubmit" id="btnsubmit" value="Submit" class="btnsubmit" />
</p>
</fieldset>
</form>
form{
width:50%;
margin-left:25%;
}
form p{
clear:left;
padding-top:5px;
}
form input.txt{
border:1px inset #003300;
width:200px;
}
form input.btnsubmit{
border:1px solid #003300;
background:lightgreen;
margin-top:15px;
}
form p label{
width:25%;
float:left;
}
form fieldset{
border:1px dotted green;
background:#DDFFE6;
margin-top:20px;
padding:10px 20px 10px 20px;
}
legend{
padding:3px;
font-weight:bold;
}
That’s all the coding I had done so far when I saw the error in ie. I think its a known bug of ie. I might be wrong.
Do you find wrong anything in the code?
Can you post a link to the example? It’s just too theoretical without seeing the code.