Form Elements Not Appearing Correctly in FF

Thank you so much Graham Cook. Your explanation was very good. Thanks for
the sample code. I am fairly new to CSS and I had also forgotten all about
the label element.

I do have one other question. The for attribute for the label element, is
that something that is used for xml or xhtml, I have never seen it before?
Also I validated my pages with the w3c html validator and they had 30
errors. These are easily fixable and one of the errors was regarding the for
attribute. The actual error message depended upon the label it was used in.

An example of the error follows:

reference to non-existent ID "RECIPIENT"

This error appears for the <label for="recipient"> tag.

Would appreciate an explanation of this if you have one. I realize what the
error message means and why but thought you might be able to explain the
need for using the for attribute.

Again many thanks.

Steven Costello

-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of Cook, Graham R
Sent: Sunday, June 05, 2005 10:34 PM
To: [EMAIL-REMOVED]
Subject: [css-d] Form Elements Not Appearing Correctly in FF

Below is code that works in Ffox and IE - not tested in others. Please note
also; it is much better to use a style tag rather than have all inline
styles, style the tag wherever possible rather than surrounding the tag in a
div, for accessibility use label tags and associate the label with the
following field via the "for" attribute (only done in first field),

==============CODE===========================
	<style>
	label, .dummyLabel{FLOAT: left;	WIDTH: 30%;	TEXT-ALIGN:
right;}
	input.text, select, textarea, .message{FLOAT: left; WIDTH: 50%;
TEXT-ALIGN: left;}
	.clearLine {clear:both; padding:5px 0px;}
	</style>
	<DIV>
		<DIV  class="dummyLabel"></DIV>
		<DIV class="message">
			**Note** No need to sign your message. The name you
provided in the 
			<I>"Your Name"</I> field will be used as the
signature. Thank you.
		</DIV>
		<DIV class="clearLine"></DIV>
		<label for="email">Email Address:</label>
		<input type="text" name="email" id="email"
maxlength="50" class="text"><BR>
		<label>Your Name:</label>
		<input class="text" type="text" name="name"
maxlength="30"><BR>
		<label>Select Recipient:</label>
		<SELECT name=recipient> <OPTION value="" selected>- -
-Please select 
		  a recipient:- - -</OPTION> <OPTION
[EMAIL-REMOVED]>Church 
		  Office</OPTION> <OPTION value="">- - - - -Pastor's
Email- - - - -</OPTION> 
		  <OPTION [EMAIL-REMOVED]>Pastor Gary
deBock</OPTION> <OPTION 
		  [EMAIL-REMOVED]>Pastor Greg Shewan</OPTION>
<OPTION 
		  [EMAIL-REMOVED]>Pastor Don Hancock</OPTION>
<OPTION 
		  [EMAIL-REMOVED]>Pastor Jim Folk</OPTION>
<OPTION 
		  [EMAIL-REMOVED],
[EMAIL-REMOVED], [EMAIL-REMOVED], [EMAIL-REMOVED]">All 
		  Pastor's</OPTION> <OPTION value="">- - - - -Elder's
Email- - - - -</OPTION> 
		  <OPTION [EMAIL-REMOVED]>Steve
Wheeler</OPTION> <OPTION 
		  [EMAIL-REMOVED]>Joe Gardner</OPTION>
<OPTION 
		  [EMAIL-REMOVED]>Harley Blake</OPTION> <OPTION

		  [EMAIL-REMOVED]>Bill Routley</OPTION>
<OPTION 
		  [EMAIL-REMOVED],
[EMAIL-REMOVED], [EMAIL-REMOVED],
[EMAIL-REMOVED]">All 
		  Elder's</OPTION></SELECT><BR>
		<label>Subject:</label>
		<INPUT class="text" type="text" maxLength=50 size=30
name=subject><BR>
		<label>Message:</label>
		<TEXTAREA name=body rows=10 cols=50></TEXTAREA><BR>

		<DIV class="clearLine"></DIV>
		<DIV  class="dummyLabel"></DIV>
		<INPUT id=submit type=submit value="Send Email">&nbsp;
		<INPUT onclick="return setFocus(this);" type=reset
value="Reset Form">
	</DIV>
	</FORM> 

Regards

Graham Cook

Standards Manager - Content Integrity
Data & Online
Telstra Technology
32/300 Latrobe St
Melbourne VIC 3000

Ph- (03) 9632 8035
Fax - (03) 8600 9850
Mob - (03) 0417 876 869
Email - [EMAIL-REMOVED]

Find out more about Standards :
http://telstra.com.au/standards/index.cfm

The information contained in this e-mail message may be CONFIDENTIAL and may
also be the subject of Legal Professional Privilege. If you are not the
intended recipient, any use, interference with, disclosure or copying of
this material is unauthorised and prohibited. If you have received this
message in error, please reply to this email to advise of the incorrect
delivery and then delete both it and your reply. Thank you. 

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org --
http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Form Elements Not Appearing Correctly in FF

Sent by Steven Costello on 6 June 2005 07:07

Message thread:

Possibly related: