[thelist] forms and css

Stephen Caudill SCaudill at municode.com
Tue Sep 9 08:58:55 CDT 2003

Bill Hughey on Monday, September 08, 2003 5:46 PM said:

: In reply to a question about forms and css I got several replies
: that showed how you would layout something like 
: <div> <label/>  <input/> <span/> <input/> <span/> >/div>
: This involved 'floating' the first label to the left and
: specifying its width.  This made the rest line up nicely,
: however, my more difficult forms are of the form below.  
: header
: input label input label
: input label input label
:     .....
: input label input label
<snip />


  I think I was one of the folks who pointed you at the ALA method 
for laying out forms with CSS...  that said, I have to agree with 
Dan, tables are *not* bad. For complicated forms, I still use tables 
and still think it's a proper semantic usage.  The goal of CSS is to 
separate design from content, which in this case the tables don't 
hinder, they can even help in the employment of CSS on forms.  A well 
marked up table offers low level structured (albeit somewhat rigid) 
presentation whose high level presentation can be readily affected by 
CSS.  Take the following example:

<form method="post" action="#" id="contact">
   <th colspan="4">Contact Our Company</th>
   <td>First Name: </td>
   <td><input type="text" name="fname" /></td>
   <td>Last Name: </td>
   <td><input type="text" name="lname" /></td>
   <td>Other Stuff: </td>
   <td><input type="text" name="fname" /></td>
   <td>More Stuff: </td>
   <td><input type="text" name="lname" /></td>
   <td colspan="4">
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Submit" />

  A layout like this actually takes less hooks in your code than its 
equivalent using divs, spans, ids and classes to successfully employ 
CSS on a form.  Set something like that as your standard coding 
practice and you even get around IE gotchas with CSS for forms like 
its lack of attribute selectors...  thus if all of your submit 
buttons are always in the <tfoot>, you don't have to apply a separate 
style to have a different look for text inputs than your buttons.  


table#contact input{
  border:1px inset;
  color: #003399;
  background: #dedede;

table#contact tfoot input{
  border: 1px outset;

  I went through a fairly long period of being caught up in the hype
and trying not to use tables for anything, before I realized that the
same argument against /over/ use of tables is an argument *for* proper
use of well marked up tables where appropriate. 

Anyway, I hope this helps,
Stephen Caudill

More information about the thelist mailing list