Table Extra Space

I reposted this because I coulndn't reply to the archive:

*****Original Question:

I added an html table in my tpl_header to line up some images. When it displays in the browser, It adds a 2px line under the table. I need to line zencart up with another sites header. But it jumps 2px.

This only happens in a pc browser and not in the mac browser.

Is there a reason why it adds these lines to the bottom only?

Can it be fixed?

Thanks

*****First Response:

http://developer.mozilla.org/en/docs/Image...Mysterious_Gaps

you want this fix...

Quote:
Setting images to be blocks

The first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element. Do that, and it no longer generates a line box, and so the problem goes away-- assuming that the image is the only thing that occupies that table cell. In the simplest case, we might add a style like this:

Code:
td img {display: block;}

*****New Question:

I have read through the link you sent: however, I am still unsure where to put this:

td img {display: block;}.

If this is my table:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="163" align="left" valign="top"><a href="http://www.site.com"><img src="../images/header_01.jpg" width="163" height="135" border="0"></a></td>
<td width="505" align="left" valign="top"><a href="http://www.site.com"><img src="../images/header_02.jpg" width="505" height="135" border="0"></a></td>
<td align="left" valign="top" background="../images/header_03.jpg"> </td>
</tr>
</table>


Where would I put this : td img {display: block;}

Thanks for all your help

1.What version do you use?

2.td img {display: block;} goes into your stylesheet


Dimi

I'm using 1.3.1, How is this applied in the style sheet. Basicly I need to align 2 images and 1 background image. Right now I have them sitting in a table:

td image 1 / td image 2 / td background image 3

How do I implement this into the tpl_header & stylesheet?

Thanks for your quick responses.

There are two ways to do this.

1. Put it in the stylesheet, just add it to the bottom

td img {
display: block;
}

However, know that it will affect every image.

2. Apply the style directly to the image. I've edited your table below.

If this is my table:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="163" align="left" valign="top"><a href="http://www.site.com">
<img src="../images/header_01.jpg" width="163" height="135" border="0" style="display: block"></a></td>
<td width="505" align="left" valign="top"><a href="http://www.site.com">
<img src="../images/header_02.jpg" width="505" height="135" border="0" style="display: block"></a></td>
<td align="left" valign="top" background="../images/header_03.jpg"> </td>
</tr>
</table>

Try both and see what happens.

tina