I'm trying to format a table where each row will contain a single line
of text followed by a number of optional icon images (sometimes none).
However, I'm having great difficulty in getting an even spacing
between each row of the table. A much simplified example of the kind
of thing I want to do is shown in the html below:
<html>
<head>
<title>Format Test</title>
<style>
td {line-height: 60px;}
</style>
</head>
<body>
<h1>Format Test</h1>
<hr>
<table border=1>
<tr><td><li>This is line one</tr></td>
<tr><td><li>This is line two <img src="icon.gif" height="30"
width="30"></td></tr>
<tr><td><li>This is line three</tr></td>
<tr><td><li>This is line four <img src="icon.gif" height="30"
width="30"></tr></td>
<tr><td><li>This is line five</tr></td>
</table>
<hr>
</body>
</html>
Viewing in ie6, lines one, three and five (where there is no image
present) space correctly, but as soon as an image is introduced to the
line, the height shrinks to the height of the image and line-height
appears to be ignored. What I want to achieve is the same row height
and spacing as lines one, two and three with the bottom of the image
aligned with the bottom of the text in all cases.
One solution would be to add an invisible image to each of the lines
without images, but this strikes me as clumsy and I would have hoped
there would be a much better solution using css.
I'd be very appreciative of any help anyone might be able to provide.
Phil
