Images in table cells - argh!!

[Guest_imported]

I'm using PHP to output a table in HTML. Depending on however many times it's supposed ot loop it it builds up a table block. It all works fine.
However, if I make cells and don't size them (or even if I do give them size settings) and put an image in, the cell suddenly gets a gap below and/or above the image!!! If I use the same code but say I want the cell to be sized and use the image as a background, it works fine! however, this is a workaround rather than a solution (never good in programming) and also has 1 or 2 side effects of seeing an image tile (which it shouldn't if the cells are the size of the image and they ARE set to be).
So - why does putting an image in a cells mess it up like that? here are the 2 example outputs of html.

<td>
<im src=&quot;images/mmtopleft.gif&quot; width=54 height=106>
</td>

The one above makes gaps in the cell that ruin the whole table construction.

<td rowspan=2 background=&quot;images/mmtopleft.gif&quot; width=54 height=106>
</td>

The above one makes some cells show the image tiling dispite being set to be the same cellsize as the image (most are ok though)

Any help? Anything at all?!

 

[sonnysavage]

Did you try putting

border="0"

in the image tag?

 

[mrgone4662]

I had the same problem (well, close).

The fix is to remove the space after your <td> tag and before the </td>.

So instead of:
<td>
<im src=&quot;images/mmtopleft.gif&quot; width=54 height=106>
</td>

you'd have:
<td><im src=&quot;images/mmtopleft.gif&quot; width=54 height=106></td> -- cut here --

 

[Leozack]

Ugh, if that works I'll be pleased, but PO'd cos that just makes VERY ugly html =(

 

[sonnysavage]

If you use css specifications, you should be able to get rid of the white space and keep your code pretty.

This site is invaluable to maintaining standards compliant code, and for pure reference value as well:

http://www.w3schools.com/

 

[Leozack]

CSS specifications? How would I go about using CSS to stop the spaces in my table? I'd like to know =)

I've used the said technique and sure enough my images no longer have space around them, just because I put them in the same html line as the td tags =/ Yet my current table layout is a tricky one, and the top left and right cells are the only ones messing me around. Certain cells seem determined to be bigger than the images inside them, even when the cell is sized ...

 

[sonnysavage]

Try this:

img { border: 0; }
td { padding: 0; }

But, like I said, I am CONSTANTLY hanging out at

http://www.w3schools.com/

to find out how to do things with CSS and keeping my site standards compliant (

http://www.mcsda.org/).

 

[mrgone4662]

unfortunately removing the white space is the only way to make this work right now. remember that browsers are supposed to read and output one white space and trim the rest. too bad they will resize a cell past the specified dimensions to do so.

i'm just as mad about the ugly html as you are. -- cut here --