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!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.What?! For real?!
I can't use this "command" in CSS & IE?
That's crazy!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.Damn, What will I'll tell the customer?
He is insist of having it!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
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!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.What?! For real?!
I can't use this "command" in CSS & IE?
That's crazy!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.Damn, What will I'll tell the customer?
He is insist of having it!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