By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Problem getting an even spacing between lines

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
*Phil K*:

<tr><td><li>This is line one</tr></td>


If you don't use correct HTML, you shouldn't be surprised of unexpected,
inconsistent or "wrong" renderings.

A single column table is usually a list, which you probably want, judging by
the <li>:

<ul>
<li>This is line one</li>
...
</ul>

If you still want a table, nest it correctly:

<tr><td>This is line one</td></tr>

If you want the disc bullet from lists without actually using a list, &bull;
(• or &#x2022) comes close.

--
Useless Fact #12:
The national anthem of Greece has 158 verses. No one in Greece has memorized all
158 verses.
Jul 20 '05 #2

P: n/a
On Sat, 10 Jan 2004 14:44:16 +0100, Christoph Paeper
<ch**************@nurfuerspam.de> wrote:
*Phil K*:

<tr><td><li>This is line one</tr></td>
If you don't use correct HTML, you shouldn't be surprised of unexpected,
inconsistent or "wrong" renderings.


Sorry. The incorrect nesting was introduced while trying to knock out
a simple example of what I'm trying to achieve. It actually makes no
difference to the problem as you can see if you open the html below
where I've corrected the nestling.
A single column table is usually a list, which you probably want, judging by
the <li>:

<ul>
<li>This is line one</li>
...
</ul>

If you still want a table, nest it correctly:

<tr><td>This is line one</td></tr>

If you want the disc bullet from lists without actually using a list, &bull;
(• or &#x2022) comes close.


I do want a table, but a list suffers from *exactly* the same problem
anyway as you'd see if you change the table tags for ul tags and the
row/cells for list items.

<html>
<head>
<title>Format Test</title>
<style>
td {line-height: 60px;}
</style>
</head>
<body>
<h1>Format Test</h1>
<hr>
<table border=1>
<tr><td>This is line one</td></tr>
<tr><td>This is line two <img src="icon.gif" height="30"
width="30"></td></tr>
<tr><td>This is line three</td></tr>
<tr><td>This is line four <img src="icon.gif" height="30"
width="30"></td></tr>
<tr><td>This is line five</td></tr>
</table>
<hr>
</body>
</html>

Phil
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.