www.webdeveloper.com
Results 1 to 6 of 6

Thread: A problem with a fieldset...

  1. #1
    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!

  2. #2
    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.

  3. #3
    Join Date
    Feb 2004
    Posts
    1,345
    What?! For real?!
    I can't use this "command" in CSS & IE?

    That's crazy!

  4. #4
    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.

  5. #5
    Join Date
    Feb 2004
    Posts
    1,345
    Damn, What will I'll tell the customer?
    He is insist of having it!

  6. #6
    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

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles