SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Feb 2005
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS form design not rendering in IE

    Hello All,

    I've created a css form like so:

    HTML Code:
    <style>
    /* As soon as I put it in its own stylesheet its fine */
    /* If I put it in my external stylesheer in with the other styles works in FF, but then not show in IE, what could be causing this? */
    #entryform {margin-top:10px;font-size:12px;background:#FFF;font-weight:bold;width:650px}
    #entryform fieldset {border:1px solid #ddd;padding:5px;font-size:16px;}
    #entryform legend {color:#CC3300;}
    #entryform p {margin-top:8px; clear:both;font-size:12px;}
    #entryform label {float:left;width:200px;text-align:right;margin-right:5px;}
    #entryform .inputbox {width:200px;height:20px;border:1px solid #ddd;background:#fafafa;}
    #entryform textarea {width:350px;border:1px solid #ddd;background:#fafafa;}
    #entryform .clearer {margin-bottom:8px;}
    #entryform input.btn {color:#FFFFFF;background-color: #CC3300;width:70px;font-weight:bold;height:25px;} 
    .formerror {color: #CC0000;margin-bottom:20px;}
    .formsuccess {color: #0066CC;margin-bottom:20px;font-size:15px;margin-top:10px;font-weight:bold}
    </style>
    
    <form action="" method="post"  name="Form Name" id="Form Here">
    <div id="entryform">
      <fieldset>
        <legend>Enter your suggestion below:</legend>
        <p><label for="Telephone">Telephone:</label> <input class="inputbox" type="text" name="telephone" value="'.$telephone.'"></p>
        <p><label for="Your Email">Email Address:</label> <input class="inputbox" type="text" name="email" value="'.$email.'"></p>
        <p><label for="Reasons Why ">Because:</label> <textarea name="reasons" cols="40" rows="6">'.$reasons.'</textarea></p>
    	  <input name="Submit"type="Submit" value="Submit" />
    	  <input name="Reset" type="reset" value="Reset" /> 
    	</p>
    </fieldset>
    </form>
    Now the above works fine in IE & FF. However, when I strip that css file out of the document and put it in an external css file linking to my page, which contains all the other styles on my website the styling on the form does not show in IE, but it does in FF?

    Anything that could be clashing, or i've missed doing?

    Thanks

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Sounds bizarre. It would help if you could give us a link to a live example so we can see the problem in action and check if you've got any conflicts with other styling.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    This may or may not have anything to do with the problem, but you need to fix it anyway:

    id="Form Here">

    spaces aren't valid token characters... you'll either have to camelCase it or TitleCase it or under_score it. Same goes for the label "for" attributes, as they must match the input id's (so yes, please add the id's to your inputs... that's the reason for the "for" attributes in the labels in the first place... they don't match "name").

    This is prolly illegal because for other attributes, a space separates two separate entities, and elements may not have more than one id.

    class="foo manchoo" is legal to say the element has two separate classes, foo and manchoo... it does not mean a single class of "foo manchoo" though.

    Your other HTML syntax error MIGHT be causing your problem but I can't see why putting the stylesheet elsewhere would make a difference??

    But you are referring to a div in the form, but you never closed it.
    Code:
    <div id="entryform">
      <fieldset>
        <legend>Enter your suggestion below:</legend>
        <p><label for="Telephone">Telephone:</label> <input class="inputbox" type="text" name="telephone" value="'.$telephone.'"></p>
        <p><label for="Your Email">Email Address:</label> <input class="inputbox" type="text" name="email" value="'.$email.'"></p>
        <p><label for="Reasons Why ">Because:</label> <textarea name="reasons" cols="40" rows="6">'.$reasons.'</textarea></p>
    	  <input name="Submit"type="Submit" value="Submit" />
    	  <input name="Reset" type="reset" value="Reset" /> 
    	</p>
    </fieldset>
    </form> <-- where's the beef?
    So that is certainly causing browsers to do their error-guessing thing and that could explain the difference between FF and IE. Again, no clue why where the styles are would matter.


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
  •