CSS Quirks with form inputs

**sniperman** · 12-29-2009, 05:09 AM

Hi,

I was hoping someone could come up with what must be a simple solution. I have been on this puzzle for over an hour, with a simple aim to align a form tick box with a paragraph of text.

The code worked fine until I fiddled around for cross-browser compatibility. I added floats eeeeek!

For the life of me I can't figure out why the *******s won't align, and why all the other inputs seem to misalign, mostly on IE. Any pointers would be helpful.

The code here is ready to be HTML'ized.

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
.corporateCSS	{
font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
font-size:.8em;
background-color:#f6f6f6;
border:none;
border-top:1px solid #dddddd;
margin:0 auto;
position:relative;
}
.corporateCSS input	{width:270px;float:left;margin-top:16px;position:relative;}
select	{width:270px;float:left;margin-top:16px;position:relative;}
label	{display:block;float:left;clear:both;width:300px;text-align:left;margin-top:16px;position:relative;}
legend	{color:#0046d5;position:relative;}
#disclaim	{background-color:blue;float:left;}

#organic_form	{
width:650px;
margin:0 auto;
border:solid 1px #3f3e3e;
background-color:white;
}
fieldset	{border:0;width:800px;}

#registration {width:100%;}

.btn	{background-color:#D9FFB4;vertical-align:middle;text-align:center;width:80px;}
.evnts	{background-color:#CBFF7C;width:200px;}
.spcs	{background-color:#ACE8A4;width:200px;}
.retreat_input	{width:40px;}

#payment	{width:270px;float:left;margin-top:16px;}
#promotion	{float:left;margin-bottom:1.4em;background-color:red;}
#checkbox	{background-color:red;width:40px;display:inline;float:left;clear:left;position:inherit;}
.disclaimer	{font-size:.8em;color:#9D9D9D;margin-top:0;float:left;clear:both;}


</style>
</head>

<body>



	<form id="healthretreatsSubmission" name="healthretreatsSubmission" method="post" action="">
	
	
	  <fieldset class="corporateCSS"><legend>Processing Information</legend>
		<label for="payment">Payment Options</label>
		<select name="payment" size="1" id="payment">
		  <option value="method0"></option>
		  <option value="method1">PayPal</option>
		  <option value="method2">Shopping Cart</option>
		  <option value="method3">Money Transfers</option>
		  <option value="method4">Google Checkout</option>
		  <option value="method5">Credit Card Facility</option>
		  <option value="method6">BSB Account Details</option>
		  <option value="method7">Acquire Customer Details</option>
		</select>
	
		<label for="promotion">Promotional Code</label>
		<input type="text" name="promotion" id="promotion" />

		<div id="disclaimer" style="border:solid;background-color:#CCFF00;width:600px;">	
		<input type="checkbox" name="checkbox" value="checkbox" id="checkbox" />
		<label id="disclaim" for="checkbox" >I have read and accept the disclaimer</label>

		<p class="disclaimer">I understand that etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc </p>
		</div>
		<input style="float:left;" type="submit" name="Submit" value="Submit" id="Submit" />
	</fieldset>
	</form>
	
</body>
</html>

**sniperman** · 12-29-2009, 08:55 AM

I forgot to add, these bugs are specific to IE7 and FF3

Thread: CSS Quirks with form inputs

Thread Tools

Search Thread

CSS Quirks with form inputs

Bookmarks

Bookmarks

Posting Permissions