PDA

Click to See Complete Forum and Search --> : A problem with a fieldset...

weee
08-16-2005, 09:59 PM
I have this weird color going up the form. You can't see it in FF - only in IE.
What is that? How can I get rid of it?

This is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
form {margin: 0px;}
input, textarea {margin: 0px; background: url(../imgs/b_input_shadow.jpg); background-repeat: no-repeat; border: 1px solid #005993; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; padding: 2px 5px; color: #0079c8; margin: 2px;}
input.button {background-color: #00bcfa; border-color: #0079c8; color: #fff; padding: 1px 5px;}
fieldset {background-color: #b8d6ff; border: #26a solid 1px; margin: 0px 20px 10px 0px; padding: 10px; width: 365px;}
fieldset label {float: left; width: 180px; padding: 3px 0;}
fieldset label span {display: block; padding: 0px 0px 2px 4px;}
label {display: block;}
legend {background-color: #fff; color: #BD3242; margin: 0px 2px; padding: 2px 4px;}
</style>
</head>

<body>

<form name="theForm" action="default.asp" method="post">

<fieldset>
<legend>Contact Details</legend>
<label>
<span>Full Name</span>
<input type="text" name="fullName" id="fullName"/>

<span>Message</span>
<textarea id="message" name="message" rows="3" cols="40"></textarea>
</label>
</fieldset>

</form>

</body>
</html>


Thanks!
JoeyG
08-16-2005, 10:17 PM
Unfortunately, at this time MS does not support CSS, despite whatever they're saying.
Basically, the only solution is to remove the CSS, although that's way too much trouble for IE.

Search the internet for hacks if you must, but if it also works fine in Opera then your code is not problematic, and as such cannot be 'fixed'. Simply post a message asking users to download a web browser that's capable of browsing the web.
weee
08-17-2005, 12:18 AM
What?! For real?!
I can't use this "command" in CSS & IE?

That's crazy!
ray326
08-17-2005, 01:01 AM
That's just the difference in the way IE sees a fieldset/legend relative to the rest of the world. In general it make a background treatment useless.
weee
08-17-2005, 12:19 PM
Damn, What will I'll tell the customer?
He is insist of having it!
Fang
08-17-2005, 03:39 PM
Fake it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
form {margin:0;}
input, textarea {margin: 0px; background: url(../imgs/b_input_shadow.jpg); background-repeat: no-repeat; border: 1px solid #005993; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 10px; padding: 2px 5px; color: #0079c8; margin: 2px;}
input.button {background-color: #00bcfa; border-color: #0079c8; color: #fff; padding: 1px 5px;}
fieldset {position:relative;background-color: #b8d6ff; border: #26a solid 1px; margin: 0px 20px 10px 0px; padding: 10px;padding-top:1.5em; width: 365px;}
label {display: block;}
.fakeIt {position:absolute;top:-2.2em !important;top:-0.8em;background-color: #fff; color: #BD3242; margin: 0px 2px; padding: 2px 4px;}
</style>
</head>

<body>

</form>
<form name="theForm" action="default.asp" method="post">

<fieldset>
<div class="fakeIt">Contact Details</div>
<label for="fullName">Full Name</label>
<input type="text" name="fullName" id="fullName"/>

<label for="message">Message</label>
<textarea id="message" name="message" rows="3" cols="40"></textarea>

</fieldset>

</form>

</body>
</html>
Although I would recommend using conditional comments to serve this to IE and the legend to other browsers