We help IT Professionals succeed at work.

TD set a width

catonthecouchproductions
on
Hey,

I am working on this page http://goo.gl/c9Dik - any ideas on how I can get the labels that are under Employment and others to have a set width. I cant seem to get the to be even.

I have tried various display options and cant go with that. Also have tried setting the width on the TD.

Ryan
Comment
Watch Question

Kim WalkerWeb Programmer/Technician

Commented:
Right now, line 433 of style.css is giving all TDs a width of 311px, but in this case the table is only 409 pixels wide.
LZ1
Top Expert 2011

Commented:
Try taking the width off of the table and then setting your widths on the .form_label class.
Check it out now, a bit better. But need that first TR to even up. Will work on the widths. Much better though.

LZ1
Top Expert 2011

Commented:
First try taking the align="center" off of all the TD's.  Set your alignment in CSS not in your HTML
I was going to strip through it. I am converting this form from their old site. Form was a beast.
LZ1
Top Expert 2011
Commented:
It looks like it too. Also remove the width= declarations on the TD's
Looking good, refresh.
LZ1
Top Expert 2011

Commented:
Very nice. Except you missed your first TD. It's supposed to be blank.
Kim WalkerWeb Programmer/Technician

Commented:
You also need to remove the display and float properties from your TRs on line 430.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
make it simple and use colgroup

remove all classes align valign class from all td's use colgroup
<table border="0" cellspacing="10">
<colgroup>
<col width=200 align=center valign=middle class=form_label>
<col width=200 align=center valign=middle class=form_label>
<col width=200 align=center valign=middle class=form_label>
<col width=200 align=center valign=middle class=form_label>
</colgroup>
<tr>
<td>&nbsp;</td>
<td>Present</td>
<td>Previous</td>
<td>Previous</td>
</tr>
<tr>
<td>Employer:</td>
...
</table>

Open in new window

Cleaned up the floats, just had to overwrite them.
Now just the headers remain, I think its just a width issue on that. Trying to play with it in Firebug.
Since we're using the same widths on those elements I thought the headers and labels would match up if you inspect in FB - example the ones under: Previous Housing Information
I took a little break last night from the form. Coming back to it this AM. Any ideas on how to get the headers of my tables left aligned?

http://clients.catonthecouch.com/burlingtonapartments/?page_id=327

Do I wrap them in a <thead> And style accordingly?

Thanks,

Ryan
Web Programmer/Technician
Commented:
The display for tr elements should be table-row (line 457) where you now have table.

#wpcf7-f326-p327-o1 fieldset table tr {
    display: table-row;
    float: none;
}

Open in new window

Awesome, looks great. Thank you! I always forget the numerous other display options.
Top Expert 2011

Commented:
Your width declaration in form_label is all at "200px", but your table is not wide enough to support that many columns at 200 pixels each.

In FF7, it looks like it will work if you set it to 150px (for Previous Address, anyway), but then the other sections are messed up).  Because you have a different number of columns in each section, you may want to apply different styles to each section (remove "width" from form_label and creare styles for "5column-width", "4column-width" etc.)

e.g., this makes Previous Address look good
#wpcf7-f326-p327-o1 fieldset table tr td.form_label {
    font-weight: bold;
    text-align: left;
    width: 150px;

Open in new window


But, I just refreshed the page and it looks like you fixed the left-alignment.

If this is something you may need to monkey around with later, any chance we can talk you into converting the whole thing to DIVs? ;o)

Explore More ContentExplore courses, solutions, and other research materials related to this topic.