www.webdeveloper.com
Results 1 to 6 of 6
  1. 08-16-2005, 08:59 PM #1
    weee
    weee is offline Registered User
    Join Date
    Feb 2004
    Posts
    1,345

    A problem with a fieldset...

    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:

    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!
    Weee
    Reply With Quote Reply With Quote
  2. 08-16-2005, 09:17 PM #2
    JoeyG
    JoeyG is offline The One
    Join Date
    Aug 2005
    Location
    Canada
    Posts
    27
    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.
    If I disagree with you and you are correct, it doesn't necessarily mean that I'm wrong.
    I might also be drunk.
    Reply With Quote Reply With Quote
  3. 08-16-2005, 11:18 PM #3
    weee
    weee is offline Registered User
    Join Date
    Feb 2004
    Posts
    1,345
    What?! For real?!
    I can't use this "command" in CSS & IE?

    That's crazy!
    Weee
    Reply With Quote Reply With Quote
  4. 08-17-2005, 12:01 AM #4
    ray326's Avatar
    ray326
    ray326 is offline Got Link?
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan
    Reply With Quote Reply With Quote
  5. 08-17-2005, 11:19 AM #5
    weee
    weee is offline Registered User
    Join Date
    Feb 2004
    Posts
    1,345
    Damn, What will I'll tell the customer?
    He is insist of having it!
    Weee
    Reply With Quote Reply With Quote
  6. 08-17-2005, 02:39 PM #6
    Fang's Avatar
    Fang
    Fang is offline Resistance is futile
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Fake it:
    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: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
    At least 98% of internet users' DNA is identical to that of chimpanzees
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

 HTML5 Development Center



Recent Articles