Forum Moderators: open
My issue occurs while viewing the page in Fire Fox 2 but not IE6/7. It is resolved when I remove the DOCTYPE but I don't want to do that.
I'd like to have a table valign a small image to the very top of a cell. valign="top" moves the image up, but not very far. I've tried various style settings using position, margin, top, vertical-align but nothing I try works.
This code illustrates the issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head><title>Test</title></head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top"><img src="/img/tlsmalldarkcorner.gif" width="5" height="5" border="0" /></td>
<td>A<br />B</td>
</tr>
</table>
</body>
</html>
The fix is easy - you set the image to display as a block-level element instead. In your CSS stylesheet:
img {display:block;}or in the HTML:
<img src="/img/tlsmalldarkcorner.gif" width="5" height="5" border="0" [b]style="display:block;"[/b] />
Thought I'd seen that approach somewhere around . . .
<td valign="top" style="font-size: 2px;">
It does work, in that you are reducing the line-height including descenders to being less than the height of the inline image. However, setting the image as a block-level element is usually simpler. :)
You could well argue in the above example that the image shouldn't be in the HTML at all, but set as a background via CSS - that would avoid the line-height issue too.
