vertical align for images in a table

trying to align an image to the top of its row

[glevine]

This seems like such a stupid problem I'm having, but yet it exists. I have the following table in my webpage:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding-right: 6px;">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr valign="top">
<tr rowspan="2" valign="top"><img src="images/quickhits1.jpg" alt="" galleryimg="no"/></tr>
<td><a href=""><strong>Some Single-Line Text</strong></a></td>
</tr>
<tr valign="top">
<td>Some Multi-Line Text</td>
</tr>
</table>
</td>
</tr>
</table>

The problem is that the text cells align the text vertically at the top of the cell, as they should, but the image cell fails to align the image at the top of the cell. I need the image to be at the top of the cell to line up correctly. I really have no clue why this is happening. The image is 71px tall, but setting the table height to be 71px doesn't change a thing. Anyone out there have any ideas? Thanks.

[tedster]

You need to have a valign attribute (or a style="vertical-align:" rule) applied to the <td> for the cell contents to listen to it. You are currently applying it to the table row, but not to the cell itself.

[glevine]

unfortunately, that didn't change anything

[tedster]

Ah, now I see it -- your table mark-up isn't valid. <td></td> elements need to be included inside a <tr></tr> element:

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Also note, each <tr> element needs to be closed before you open a new <tr> element.

[glevine]

That was my mistake. I had attemped to use <th> in place of <td> for the column image. When I copied and pasted the code I screwed up and changed all <th>'s to <tr>'s. So unless you see something I don't, there is still something strange going on. Thanks for the help.

[tedster]

Do you now have this?

<td rowspan="2" valign="top"><img src="images/quickhits1.jpg" alt="" galleryimg="no"/></td>

If so, then the lack of the alignment you want is coming from another direction. I would suggest:

1. Especially because you are using cellspacing in a nested table -- temporarily use border=1 in both tables to see where that unwanted space is coming from. If it's just a sliver, I'd suspect the cellspacing attribute.

2. Make sure your mark-up is valid:
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[glevine]

Do you now have this?
<td rowspan="2" valign="top"><img src="images/quickhits1.jpg" alt="" galleryimg="no"/></td>

That's exactly what I have. I pulled out the nested tables because they weren't entirely necessary. So now the full code is:

<table border="0" cellpadding="0" cellspacing="2" width="100%" style="padding-right: 6px;">
<tr valign="top">
<tr rowspan="2" valign="top"><img src="images/quickhits1.jpg" alt="" galleryimg="no"/></tr>
<td><a href=""><strong>Some Single-Line Text</strong></a></td>
</tr>
<tr valign="top">
<td>Some Multi-Line Text</td>
</tr>
</table>

I did use "border=1" but that didn't help me to figure out where the bug is coming from. I wish I could link the page on this site to show what is going on more specifically. I have already been using the HTML/XHTML validator on my code and my only errors result because the meta tage 'gallleryimg" isn't recognizable (it has not effect when taken out). I just used the CSS validator and the only errors I get are because of background colors not being set at this point, which should have nothing to do with this error unless I am mistaken.

I am just flat-out stumped. If you have any other ideas I would appreciate it. In the meantime I will continue searching on google and thinking about other solutions. Thanks.

[sonjay]

Well, you still have invalid code. Here:

<table border="0" cellpadding="0" cellspacing="2" width="100%" style="padding-right: 6px;">
<tr valign="top">
<tr rowspan="2" valign="top">

A <tr> cannot contain a <tr>. That second tr should actually be a td.

Then you have this:

</tr>
<td>

After closing the tr, you must open a new <tr> before you can put a td there.