mysterious padding in a table

[d4005]

I'm finding that table rows that I believe shouldn't be adding anything into the table, are actually adding a row of pixels. I think I must be missing a tag (padding, spacing, border or something) but I just can't find out what it is.

When I ask for the top offset position of this image, it increases by 1 for each empty row I have in the table before the row with the image in it:

<table border=0 cellpadding=0 cellspacing=0>
<tr><td></td></tr>
<tr><td>
<img src="some-image-path.jpg (http://cole.viewpoint.com/~ddavies/images/dd.jpg)">
</td></tr>
</table>

I have a function that gets me the top offset of document.images[0] and with the above table, it's one more than it should be. If I add another row (<tr><td></td></tr>) before the row the images is in, then I get yet another row of pixels.

I'm assuming there's a tr or td property that I'm missing but all the info sites I look at don't indicate one that I can see.

[duncanhall]

From what I remember of when I was actually still using tables, aren't tds supposed to have some kind of data in, rather than just <td></td>?

[d4005]

From what I remember of when I was actually still using tables, aren't tds supposed to have some kind of data in, rather than just <td></td>?
Not sure. I know there's plenty of cases where you want a <td></td> to indicate it's an empty table cell so that your data appears in the correct cells.

I do actually have stuff in my cells, I have 0x0 iframes but when I was reducing this to a manageable example of the problem I saw that it made no difference whether the iframe is in there or not so I left that out of the message. It's the tr or td themselves that is adding this 1 pixel that I can't track down. If I don't find a solution then I'm going to have to code into my positioning feature an automatic offset of -1 which would suck.

[d4005]

Here's a better explanation of my reason for wanting this. I'm being asked to deploy "something" to the page. It might be Flash, it might be an image, it might be an iframe, it might be a collection of HTML tags even. I don't know what it is, but it's HTML of some sort. At some later stage, I need to be able to get access to the position of this stuff I inserted into the page. So my design was to wrap this "something" that I'm delivering in a 2x2 table. The top left cell contains a 0x0 iframe with an id that I know. Top right cell contains nothing. So I'm expecting this row to be zero height (which it isn't). Bottom left cell is also empty, but bottom right is where I deliver my payload. So position wise, my payload should still be at offset 0,0 from where I want it to be because I've added only empty cells above and to the left of it. Only that's not true, because the table row above has mysteriously taken up a pixel row. Here's how it looks:

|------|-------|
|iframe |empty |
|------+-------|
|empty|payload|
----------------

I can't get the position easily of the payload because I have no idea what it is, but the 0x0 iframe I know the name of and can get its position easily. My problem of course is that my payload is being delivered 1 pixel lower than it should be, but the iframe position is perfect. I know I could just wrap my payload in a div but I was finding that it was being influenced by div hierarchy and giving undesirable results. That's why I switched to the table/iframe.

[skrolikowski]

Does this happen in a certain browser? It may sound strange, but IE will add extra padding if you don't close the column tag </td> right after an image.

Therefore, try this:

<img src="some-image-path.jpg"></td>

[d4005]

Does this happen in a certain browser? It may sound strange, but IE will add extra padding if you don't close the column tag </td> right after an image.

Therefore, try this:

<img src="some-image-path.jpg"></td>It happens in furry fox too :(

[simplistik]

what's your doctype? this:


border=0 cellpadding=0 cellspacing=0

is antiquated and doesn't get used in some doctypes so even though you do have it it's not reading it.

in your css try


td { padding: 0; }

and if that doesn't work float your image left (or right depends on your preference)

[d4005]

what's your doctype?I can't rely on one doctype. My stuff gets embedded into other peoples pages.


border=0 cellpadding=0 cellspacing=0
is antiquated and doesn't get used in some doctypes so even though you do have it it's not reading it.In a simple test page I put together (with no doctype at all) it's also a problem.


in your css try td { padding: 0; }This is something I'm not allowed to do. My stuff is a guest on the page and can't mess with any of the doc's css :(

[simplistik]

This is something I'm not allowed to do. My stuff is a guest on the page and can't mess with any of the doc's css :(

sure you can in every td you can put


<td style="padding: 0 !important;">

[d4005]

in every td you can put style="padding: 0;"That worked for gecko browsers nicely, but IE refuses to play ball. I even expanded it to have height:0px;width:0px; but IE even ignores that. I guess I'm stuck with floating the image up by 1px. That works perfectly of course. I can stick with that but you know how it is, you really want to find out what the REAL problem is. I don't see how IE can just arbitrarily decide that every row of a table uses 1 pixel when it's been told not to :(

This is the image floating that solves the problem on all browsers:


<div style="position:relative;top:-1px;"><img src="imagepath"></div>

and here's the whole page without the floating. Running it, you can see how in firefox the top offsets are the same (showing the first row takes up no pixels) but in IE there's a difference of 1. It's not the iframe at fault either. Removing that makes no difference. Nor does making the tr/td tags altogether like this <tr><td></td></tr> just in case the whitespace might have been considered relevant.


<html><body>
<script language="javascript">
function getRealPosition(o,w){if(!o)return 0;
var r=eval("o.offset"+w);var t=o.offsetParent;
while(t!=null){r+=eval("t.offset"+w);t=t.offsetParent;}
return r;
}
</script>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td style="padding:0;height:0px;width:0px;">
<iframe id="myiframe" src="" width=0 height=0 frameborder=0 scrolling=no></iframe>
</td>
</tr>
<tr>
<td>
<img src="imagepath">
</td>
</tr>
</table>
<script language="javascript">
document.write("iframe left="+getRealPosition(document.getElementById("myiframe"),"Left"));
document.write(", top="+getRealPosition(document.getElementById("myiframe"),"Top"));
document.write("<br>image left="+getRealPosition(document.images[0],"Left"));
document.write(", top="+getRealPosition(document.images[0],"Top"));
</script>
</body></html>


Running that gives this output on IE:

iframe left=10, top=15
image left=10, top=16

on Firefox the top positions are both the same.

[d4005]

I went for an alternate solution. To put everything in one table row and use valign=top to keep the iframe where I want it to be:



<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign=top>
<iframe id="myiframe" src="" width=0 height=0 frameborder=0 scrolling=no></iframe>
</td>
<td>
<img src="imagepath" height=100 width=100>
</td>
</tr>
</table>