CSS form design not rendering in IE

Hello All,

I’ve created a css form like so:



<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

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.

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.


[b]<div id="entryform">[/b]
  <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> [b]<-- where's the beef?[/b]

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.