Question

I have been trying to position content within a table row. The row in question in turn contains 2 other tables and 1 small thumbnail image (each within a table cell of course). The row was positioned using valign="top" till now. This worked well getting contents of all the three columns to the top.

However, I wanted to position it using CSS position:relative; vertical-align:text-top;

This positions the cell content well if there is no thumbnail image. However, once the image is included, the other columns are not positioned at all. See the image below.

^{*Sincere Apologies for the Shoddy Image Formatting.}

I want the two tables as well as the thumbnail to be vertically aligned to the top.

Please note that all margins and paddings are set to 0 and the sizes in the image are actuals.

Does somebody know why my browser (Firefox) is behaving this way and how to correct it?

Answer 1

Ok got it! It seems that vertical-align:text-top aligns an element to the top of the parent element’s text and not to the top of the parent element! Changing it to vertical-align:top did the trick 🙂