How to Remove Spurious Row Padding in Table

[Patrick Skelton]

Hi, I have a very simple 2X2 table as follows:

<table id="temp1" width="200px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img id="Img4" src="images/Logo100X100.jpg" height="100px" width="100px" />
</td>
<td>
<img id="Img1" src="images/Logo100X100.jpg" height="100px" width="100px" />
</td>
</tr>
<tr>
<td>
<img id="Img2" src="images/Logo100X100.jpg" height="100px" width="100px" />
</td>
<td>
<img id="Img3" src="images/Logo100X100.jpg" height="100px" width="100px" />
</td>
</tr>
</table>

When the table renders, there is no vertical space between neighbouring horizontal images; however, there is a persistent small border at the bottom of each image. Nothing I do seems to affect its width or get rid of it (which is what I really want). Does anyone have any idea where this might be coming from? (I have checked the images themselves, and they have no border.) Any help would be very much appreciated. Best wishes, Patrick

[TweakBird]

Patrick Skelton wrote:

there is no vertical space between neighbouring horizontal images;

Try this code

<table id="temp1" width="210px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img id="Img4" src="1.JPG" height="100px" width="100px" />
</td>
<td>
<img id="Img1" src="1.JPG" height="100px" width="100px" />
</td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td>
<img id="Img2" src="1.JPG" height="100px" width="100px" />
</td>
<td>
<img id="Img3" src="1.JPG" height="100px" width="100px" />
</td>
</tr>
</table>

[Patrick Skelton]

Hi, Thank you for the reply. The code gives me an equal border horizontally and vertically, which is neater, but I would still like to know if it is possible to have images within the cells of a table touching each other on all sides. I find it very difficult to believe this is not possible. I can (and probably should) do what I want with DIVs, but it is annoying me that I can't get rid of the space in the tables. Where are they coming from? Best wishes, Patrick

[TweakBird]

Patrick Skelton wrote:

I can (and probably should) do what I want with DIVs

Go through this link[^]. I think it might be helpful. see this one also http://www.brunildo.org/test/img_center.html[^]

[Luc Pattyn]

Hi, I think it looks fine in most browsers; however Internet Explorer (and the WebBrowser Control) feel a need to add two pixels worth of white height. I'd call that a bug. :)

Luc Pattyn [Forum Guidelines] [My Articles] Nil Volentibus Arduum

Please use <PRE> tags for code snippets, they preserve indentation, improve readability, and make me actually look at the code.

[Graham Breach]

It's a bug in IE - the white space inside the table cell is taking up some space. Try this:

<table id="temp1" width="200px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img id="Img4" src="images/Logo100X100.jpg" height="100px" width="100px" /></td>
<td><img id="Img1" src="images/Logo100X100.jpg" height="100px" width="100px" /></td>
</tr>
<tr>
<td><img id="Img2" src="images/Logo100X100.jpg" height="100px" width="100px" /></td>
<td><img id="Img3" src="images/Logo100X100.jpg" height="100px" width="100px" /></td>
</tr>
</table>

[Patrick Skelton]

Hi, Thanks to everyone who has replied. I've tried the code suggested by Graham Breach, but unfortunately I still get a 4-pixel horizontal gap in IE8. A couple of comments have suggested this is an IE bug, so I tried it in Chrome, and I got a 5-pixel gap in that, so there is some other dark force at work here. I can do what I need with DIVs, but it is very annoying. Best wishes, Patrick