Problem getting items in adjacent table cells to align vertically

Question

I'm having a big of a styling problem with some table rows. As per this screenshot:

The blue and red circles are cells in a table row (whose height is 50px). Both are styled with "vertical-align:top" . The phone number data (in the red circle) is actually a pipe-delimited string where I've substituted HTML breaks for the pipes.

In the green circle, the Fax lable is "vertical-align:top", but the actual list of fax numbers (also delimited) are vertical-align:middle.

What I want is for these things to neatly line up, with the top phone number/fax being vertically aligned with the label. Is my substitution of breaks for pipes in the phone/fax strings is the cause of this problem? Is there a way I can get what I want without changes to the database table/app?

Update: I sort of accomplished this via some padding on the table cell. I say sort of because it mostly looks lined up, but I get the sinking feeling this is happening not because I want it to, but due to random chance. And that it will one day betray me when I need it to look right the most.

Answer 1

Try the following CSS:

table td, table th {
    vertical-align: top;
}

You should probably not rely on valign and stuff, that's long-since been replaced with CSS.

Answer 2

You call them labels (as they semantically are), are you using the labels tag as well ? if so check if it has some css rules applied to it that mess things up.

1st (blue/red) this seems weird if they are both valign:top. have you checked if the label is having some top margin or padding applied on it, or some css rule with vertical-align:middle?

2nd case (green), you will need to align them to the top as well .. if one is middle and the other top you can never align them ..

Answer 3

I agree with Parrot's implementation of CSS for this, you should also note that having different fonts and font sizes in the cells will make them appear misaligned, even with the same styling applied to each. If the alignment is important to the look/feel of the page you're creating, I would consider separating the data again and making each phone/fax number it's own heading with a header row "Phone" and "Fax" having colspan="2".

*------------------------*
| Phone:                 |
|------------------------|
|   Back: | xxx-xxx-xxxx |
|------------------------|
|  Front: | xxx-xxx-xxxx |
|------------------------|
| Fax:                   |
... etc.             

And no, the substitution of | with <br /> will have no negative effect on the look of the tables, so long as there are not any LEADING |s.