Andrew :
See my tables or css post a while back for an example of this, copied below. It may help out..
----
Hi
But then we have tables used as a layout device, and a form isn't associated tabular data.. it's a user interface. What if we wanted to present the form in a different way using CSS, for instance placing the label to the right or above the input field? This is something that can't be done with table cells without changing the underlying markup.
It's quite ok to use a block containing the div, and having something like this in HTML4. You could even then float the formfield left and have a form in one long line.
<div class="formfield">
<label accesskey="a" for="email">Email address</label>
<input class="textfield" name="email" type="text" id="email"
value="" />
</div>
<div class="formfield">
<label accesskey="p" for="password">Email password</label>
<input class="textfield" name="password" type="password"
id="password" />
</div>Notes: http://www.htmlhelp.com/reference/html40/block/div.html http://www.htmlhelp.com/reference/html40/forms/label.html
This allows me to give a consistent form interface to the user as the formfield, texfield and label are all fixed widths. My only query would be is it wrong to force a label into being a block?
I did the CSS before I got my head around descendant selectors...
/* could use .formfield label */
LABEL
{
padding : 2px;
margin : 3px 1px 3px 1px;
border : none;
display : block;
width : 120px;
text-align : right;
float : left;
}.formfield
{
text-align : right;
padding : 2px;
margin : 0px 1px 0px 1px;
width : 300px;
border : none;
}.textfield
{
width : 150px;
border: 2px inset #ccc;
background-color: #ededed;
color : #333;
padding : 2px;
margin : 3px 0px 3px 0px;
font-size : 10px;
}example at my.spamtrap.net.au
Cheers James
Andrew Cheong wrote:
*****************************************************I have never heard of the <label> tag. This article is quite useful. It is true - every detail matters once you get to a certain level of web development.
I guess the <label> tag also mets conformance standards since the text that
used to float around without a semantically defined purposenow can be inside
the tag, which defines it to label the input element.
The discussion list for http://webstandardsgroup.org/
*****************************************************
