aligning dates

[Ninjakreborn]

In an old form I was working on, (before I converted to CSS forms too), I had a tables based form.

A huge one, there are 2 date fields
I have the label in one cell, the input in another, I need the dates to show like
[  ]/[  ]/[    ]
So they can fill them out, the first is restricted to 2 letters, the second is restricted to 2 letters, and hte third is restricted to 4 letters.
However when I am doing the code like this.

[code]<tr>
<td><label for="datefilled1">Today's Date:<span class="small">(mm/dd/yyyy)</span></label></td>
<td><input name="datefilled1" id="datefilled1" maxlength="2" size="1" type="text" />/<input name="datefilled2" id="datefilled2" maxlength="2" size="1" type="text" />/<input name="datefilled3" id="datefilled3" maxlength="4" size="2" type="text" /></td>
</tr>
[/code]

I know I should have done it using CSS/XHTML in the first place  But at the time I have tripled my css abilities since then, to now do forms, with better style using css.

Unfortunatlely, I can't convert this form over, the markup on both of the forms i created is horrible.  Only 2 forms, but
1 spans 4 pages, huge form, with LOTS of data going through it
1 spans 2 pages, with fair amount of data going through it, all on a password protected backend, for a company I can't reveal the url too.
The thing I need to figure out though, is what to do about this.

THe markup is horrible, it was awhile back, I have one stylesheet, about 4 pages for form 1, and 2 for form 2, and the css is HORRIBLE, like

[code]/*
Joyel Puryear / Master Configuration System       
The Freelance Businessman
http://www.freelancebusinessman.com
Copyright Joyel Puryear 2006
&copy;Master Framework
Global CSS file, used with the master framework
*/
/* Specific File Information */
/* Since this system was pretty basic to start all the styling's are in one sheet.
What happen's below, each page is marked with the appropriate pages. */
/* The original front end pages are for the login, and some for the first page of the specific event's form */
#admin {
text-align: center;
background-color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
}

#adminlogo {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 50px;
color: #FFFFFF;
background-color: #000000;
clear: both;
}

#adminlogo p {
font-size: 2em;
margin-top: 10px;
}

#frontenddiv {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 170px;
background-color: #FFFFFF;
color: #000000;
padding-top: 20px;
}

#login {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 170px;
background-color: #FFFFFF;
color: #000000;
padding-top: 20px;
}

/* form for home.php */
#frontendform {
text-align: center;
background-color: #999999;
}

#frontendformlogo {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 50px;
color: #FFFFFF;
background-color: #000000;
clear: both;
}

#frontendformlogo p {
font-size: 2em;
margin-top: 10px;
}

#frontendformdiv {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 300px;
background-color: #FFFFFF;
color: #000000;
padding-top: 10px;
}

#frontendformdiv input, #frontendformdiv select {
float: left;
}

/* styles for home2.php */
#frontendformdiv2 {
margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #FFFFFF;
color: #000000;
padding-top: 10px;
}

#frontendformdiv2 input, #frontendformdiv2 select {
float: left;
}


/* home3.php styles This specific page also need's a different height/width, so I have set it up so it can be done so */
#frontendformdiv3 {
margin-left: auto;
margin-right: auto;
width: 450px;
background-color: #FFFFFF;
color: #000000;
padding-top: 10px;
}

#frontendformdiv3logo {
margin-left: auto;
margin-right: auto;
width: 450px;
height: 50px;
color: #FFFFFF;
background-color: #000000;
clear: both;
}

#frontendformdiv3logo p {
font-size: 2em;
margin-top: 10px;
}
/* End specific style's for incidentandaccidentform3.php */

/* Standard Styles */
.small {
font-size: 9px;
}

.smaller {
font-size: 12px;
font-weight: bold;
}

#required {
font-size: 9px;
font-style: italic;
}

/* To align the table of data in the processor for event accident form */
#eventformprocessor {
margin-left: inherit;
margin-right: inherit;
}

#eventformprocessor .leftcol {
text-align: left;
}

#eventformprocessor .rightcol {
text-align: left;
}
/* End table data alignment */[/code]

All of that for just 2 forms, a password protected from and, and seperate password protected backend, both with the same layout.

THe hard part was actually setting up the huge amount of checkboxes

For now however, I have to get the dates to display like that, but currently they are doing
[  ]//
  [  ]
    [    ]
Instead of the other way I needed, any advice would be greatly appreacted.  I tried floating them, and everything.

Maintaining this site is going to be a nightmare, but re-writing the whole thing would be even worse.

[ToonMariner]

give those iputs that deal with date a class 'date'.

in your css put input.date {display: inline;}