Trying to move away from tables

[george]

I want to vertically align my inputs without use of a table. My labels have all moved nicely to the right like I asked them to using a class. Now I want all my input fields to line up. I was able to get them to move away from the label with a simple

input { position:relative;left:20px;}

I would like to get all my inputs to line up though, as well as being on the same line with the labels. Any ideas?

	<label class='detail' for='rPrefix'>Prefix</label><input type="text" id='rPrefix' /><br />	<label class='detail' for='rFirst'>First</label><input type="text" /><br />	<label class='detail' for='rLast'>Last</label><input type="text" /><br />	<label class='detail' for='rSuffix'>Suffix</label><input type="text" /><br />

and my label class

label.detail {font-family:"Times New Roman", Times, serif;font-style:italic;font-size:9px;color:#00CCFF;margin-left:80px;line-height:14px;width:60px;}

Jagged input boxes.

[george]

Ok, I did it by creating an id and wraping my inputs in a span tag. Problem solved - but maybe not the best way.

[george]

Now I am no longer lining up horizontally. Sure, I change font size back and forth, but I keep a line-height at a constant 14px for all my font size changes. I even went so far as to create a line-height property for by <BR /> tag. BUt this is not working. There must be some way to keep text on the same baseline regardless of the font size. And, there must be some way to keep the vertacal jump from each <br /> the same regardless of font size. Anyone know the trick?

[elementalgrace]

I use the following for my contact forms and it works nicely (some people will argue that using lists for form styling is not semantic markup but you can change to use divs if you prefer) and you don't need to use unecessary classes to achieve it.HTML

     <ul><li><label for="txtName">Name</label><input name="txtName" type="text" id="txtName" /></li>         <li><label for="txtOrganisation">Organisation</label><input name="txtOrganisation" type="text" id="txtOrganisation" /></li><li><label for="txtTelephone">Telephone</label><input name="txtTelephone" type="text" maxlength="20" id="txtTelephone" /></li><li><label for="txtEmail">Email</label><input name="txtEmail" type="text" maxlength="255" id="txtEmail" /></li>         <li><label for="txtEnquiry">Enquiry</label><textarea name="txtEnquiry" rows="6" cols="20" id="txtEnquiry" cols="10"></textarea></li><li><label for="btnSubmit"> </label><input type="submit" name="btnSubmit" value="Send" id="btnSubmit" class="submit" /></li></ul>

CSS

ul{width: 100%;color: #000000;height: auto;text-align: left;text-decoration: none;list-style-type: none;}li{list-style:none;font: 10pt tahoma, sans-serif;padding-top:5px;padding-bottom:5px;}label{font: normal small tahoma, sans-serif;color:#e6308f;width: 10em;float: left;text-align: left;margin-right: 4em;display: block;}input{color: #e6308f;font-size: 90%;width:230px;}textarea{width:230px;font: 80% verdana, sans-serif;color: #e6308f;}input.submit {width: 100px;margin-left: 0px;}

It might be worth your while reading some of the webcredible articles on forms and accessible form styling to get you started: http://www.webcredible.co.uk/user-friendly...css-forms.shtml