Fri, 2009-01-09 21:30
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> </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>
| Attachment | Size |
|---|---|
| test.jpg | 33.46 KB |
