Difference in Form in FF & IE

[Guest Joe3000]

I have modified an applications login page. I used CSS styles to do the layout of the form and its appearance.The login page uses a widget to insert the login information:

<form name="<!--@@ html_form_name -->" action="#" method="post" onSubmit="return submitLogon();">

This is my form code used in the HTML page:

<form id="form"><label for="webctid">User name:</label><input type="text" class="ti" name="<!--@@ html_input_field_name_webctid -->" id="webctid" title="User name" /><br><label for="password">Password:</label><input type="password" class="ti" name="<!--@@ html_input_field_name_password-->" id="password" title="Password" /><img src="/webct/login/images/shim.gif" width="1" height="24" alt=" "align="absmiddle" /><br><input type="submit" id="submit" value="Login" class="action"><br><!-- End Institution Login Form Table --></form>

and these are the form CSS styles:

#form { 	background:url(!images/silverblend.png) 0 0 repeat-x;	border:0px #999999 solid;	padding-left:5px;	padding-top:5px;	padding-bottom:10px;	width:100%;}#form label { 	margin-top:2px; 	font-weight:bold; 	float:left; }#form input.ti { 	margin-top:2px; 	float:right; 	width:150px; 	border:1px #999999 solid;	height: 16px;	font: 90% "Trebuchet MS" Verdana, Arial, sans-serif;}#form input#submit { 	margin-left: 150px; 	margin-top:10px; 	border:1px #999999 solid;	background: #FFFFFF;	float:right; 	font: 90% "Trebuchet MS" Verdana, Arial, sans-serif;}#form br { 	height:2em; 	clear:both; }

This is how I want it to look:good formThis is how it looks now:bad formIt looks OK in Firefox but in IE the width of the form has been shrunk.The form widget seems to mess it up but not as bad in FF as it does in IE.Any ideas?

[S@m]

Check out this thread, it should help. What you are looking for is a "conditional comment"http://w3schools.invisionzone.com/index.php?showtopic=10662