No replies
jalz
Offline
Regular
Last seen: 11 years 13 weeks ago
Joined: 2008-05-16
Posts: 37
Points: 13

Hi Guys

I've found an example form on the net which validates to html strict and added the fields that I require. When I view the form in Safari, it looks pretty good, however when I view it in Firefox 3.0.5 on the mac, the checkboxes and radio buttons do not line up correctly on the left.I have attached a screenshot of what I mean, how can make sure this form appears correct on all major browsers. Also are there any IE pitfalls to look out for, whilst using this form as I don't have a machine to test this.

Many Thanks

Jalz

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css">
body{font: 75% Verdana, Arial, Helvetica, sans-serif;}
img{border: 0;}
h1{font-size: 2em;}
form.xhtmlForm{width: 34.58em;}
 
form.xhtmlForm label{
	cursor: pointer; 		/* CHANGES CURSOR TO HAND ICON, MAKES USERS AWARE OF LABEL */
	width: 12em;			/* LABEL WIDTH: SET THIS TO THE LARGEST LABEL SIZE */
	text-align: right;
	display: block;
	clear: left;
}
 
form.xhtmlForm fieldset fieldset, textarea, input, select{
	margin-left: 12em;		/* SET THIS TO THE "LABEL WIDTH" FROM ABOVE */
}
 
form.xhtmlForm textarea, input, select{
	font: 1em Verdana, Arial, Helvetica, sans-serif;
	margin-top: -1em;	/* PULLS THE INPUT CONTROLS ON TO THE SAME LINE AS THE LABEL */
	float:left;
}
 
form.xhtmlForm fieldset{
	padding-bottom: 0.83em;	/* ADDS PADDING TO FIELDSET TO STOPS OPERA DISPLAYING INCORRECTLY */
	clear: left;
}
	form.xhtmlForm fieldset fieldset input{
		margin: 0;
		height: 1.25em;
		display: block;
		float: none;
	}
 
	form.xhtmlForm fieldset fieldset label{
		margin: -1.17em 0 0 2em;
		width: 0;
		display: inline;
		float: left;
	}
 
.buttonFieldset{border: 0; padding: 0.17em;}
.inputInline{margin: -1em 0 0 0;}
 
</style>
</head>
 
<body>
<div><p>&nbsp;</p>
		<form action="" method="post" class="xhtmlForm">
			<fieldset>
				<legend>Personal Details</legend>
				<label for="Name">Firstname:</label><input type="text" id="Name" name="Name" tabindex="100"/>
				<label for="AddressLine1">Address Line 1:</label><input type="text" id="AddressLine1" name="AddressLine1" tabindex="200"/>
				<label for="AddressLine2">Address Line 2:</label><input type="text" id="AddressLine2" name="AddressLine2" tabindex="300"/>
				<label for="AddressLine3">Address Line 3:</label><input type="text" id="AddressLine3" name="AddressLine3" tabindex="400"/>
				<label for="Postcode">Postcode/Zip:</label><input type="text" id="Postcode" name="Postcode" tabindex="500"/>
				<label for="Phone">Phone:</label><input type="text" id="Phone" name="Phone" tabindex="600"/>
				<label for="Mobile">Mobile:</label><input type="text" id="Mobile" name="Mobile" tabindex="700"/>
				<label for="Fax">Fax:</label><input type="text" id="Fax" name="Fax" tabindex="800"/>
				<label for="Email">Email:</label><input type="text" id="Email" name="Email" tabindex="900"/>
				<fieldset>
					<legend>Sex</legend>
					<!-- FOR ACCESSIBILITY THE LABEL MUST BE TO THE RIGHT OF RADIO BUTTONS -->
					<input type="radio" name="group1" id="Male" value="Female" tabindex="1001" /><label for="Male">Male</label>
					<input type="radio" name="group1" id="Female" value="Male" tabindex="1002" /><label for="Female">Female</label>
				</fieldset>
			</fieldset>
			<fieldset>
				<legend>Computer Details</legend>
				<label for="Specification">Your Description:</label><textarea cols="35" rows="8" id="Specification" name="Specification" tabindex="1100"></textarea>
				<fieldset>
					<legend>What browser do you use?</legend>
					<!-- FOR ACCESSIBILITY THE LABEL MUST BE TO THE RIGHT OF CHECK BOXES -->
					<input type="checkbox" name="Safari" id="Safari" value="Safari" tabindex="1210" /><label for="Safari">Safari</label>
					<input type="checkbox" name="IE" id="IE" value="IE" tabindex="1220" /><label for="IE">IE</label>
					<input type="checkbox" name="Firefox" id="Firefox" value="Firefox" tabindex="1230" /><label for="Firefox">Firefox</label>
					<input type="checkbox" name="Opera" id="Opera" value="Opera" tabindex="1240" /><label for="Opera">Opera</label>
					<input type="checkbox" name="Chrome" id="Chrome" value="Chrome" tabindex="1250" /><label for="Chrome">Chrome</label>
				</fieldset>
			</fieldset>
			<!-- XHTML 1.0 Strict REQUIRES FORM ELEMENTS TO BE WRAPPED IN A BLOCK LEVEL ELEMENT, HENCE THE CONTAINER FIELDSET FOR BUTTONS -->
			<fieldset class="buttonFieldset">
				<button type="submit">Submit</button> <button type="reset">Reset</button>
			</fieldset>
		</form>
</div>
 
</body>
</html>

AttachmentSize
test.jpg33.46 KB