HTML table problem

I have a 3x3 table with a thumbnail image in the 4 corner cells - they're links to full size screenshots.

I want to put a 5 pixel border around each thumbnail image, so I set 'cellpadding="5"'. This works in IE, but in Firefox and Opera, the bottom of each image border is wider than 5 pixels, for some reason.

Anyone know how I can fix this?

Source:

<table
 style="text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <td style="background-color: rgb(20, 62, 41);"> <a
 target="_blank" href="images/screen1_big.png"><img
 style="border: 0px solid ; width: 200px; height: 150px;" alt=""
 src="images/screen1_small.png"></a></td>
      <td style="width: 20px;"></td>
      <td style="background-color: rgb(20, 62, 41);"> <a
 target="_blank" href="images/screen2_big.png"><img
 style="border: 0px solid ; width: 200px; height: 150px;" alt=""
 src="images/screen2_small.png"></a></td>
    </tr>
    <tr>
      <td style="height: 20px;"></td>
      <td style="height: 20px;"></td>
      <td style="height: 20px;"></td>
    </tr>
    <tr>
      <td style="background-color: rgb(20, 62, 41);"> <a
 target="_blank" href="images/screen3_big.png"><img
 style="border: 0px solid ; width: 200px; height: 150px;" alt=""
 src="images/screen3_small.png"></a></td>
      <td style="width: 20px;"></td>
      <td style="background-color: rgb(20, 62, 41);"> <a
 target="_blank" href="images/screen4_big.png"><img
 style="border: 0px solid ; width: 200px; height: 150px;" alt=""
 src="images/screen4_small.png"></a></td>
    </tr>
  </tbody>
</table>

Cheers!

<div style="border: 5px solid #206241"><img></div>

Hmm, I'm still getting the same problem, octothorpe. i.e. works in IE but not Firefox and Opera. :/

However, using the div shows that the border IS 5 pixels all the way around, BUT it's not hugging the thumbnail image all the way around. There's a gap (2 or 3 pixels) between the bottom of the image and the border. It's as if the browser thinks the image is a few pixels taller than it actually is.

Have you tried img vspace / hspace?

http://www.codetoad.com/html/hspace_vspace.asp

I can't reproduce your problem in FF with broken images. The only thing I can think of would be aligning the <img> to the baseline.

Mustang: That doesn't seem to work either. :/

I can get the borders to appear correctly sized in all three browsers by adding the following line to the img tags:

style="border: 5px solid ; color: rgb(20, 62, 41); width: 200px; height: 150px;"

However, in IE three of the image borders are purple and one (top-right) is blue!?!?!?! I can't figure why that's happening, at all. :/

octothorpe: Strange you can't reproduce the problem in FF. Did you try it with images the same size as mine (200x150)?

Sorry, I'm pretty new to HTML so I'm not sure what you mean when you say "aligning the <img> to the baseline".

he means:

align="baseline"

OK, I added align="baseline" to the img tag but my editor converted it to align="bottom". It didn't work - I still get the gap.

why don't you creates separate pages then, one for IE and either ask or auto-detect the browser at the begining...

It might just be one of those quirky little minor differences between the browsers... I've had a problem like this actually... Trying to make a bordered photo with tables... It always sticks a few extra pixels in around things.... I even went to other sites where I KNOW it works, copied the html (pr0n sites) and it STILL didn't work...

Obviously there is something either missing that firefox requires and IE doesn't... or a preset that forefox sets differently than IE and you need to find that....

Apart from not knowing how to do that, it sounds like too much hastle. :)

Yeah, it's a weird one, alright. Octothorpe says he can't reproduce the problem so I'm thinking something else in the HTML is causing the problem. I'm using some internal CSS so maybe the 'body' definition in there is causing side effects, or something. I'll have to investigate, I guess.

TBH, it's no real problem because, if I can't sort it out, I'll just add a border to the thumbnail images themselves. I was mainly just curious as to why the problem existed, and due to my limited experience with HTML, figured I must be doing something wrong.

Probably some CSS.



No, but...



Why not upload the whole page somewhere and post the URL here so we can test it for ya. If I can reproduce the problem, I can most likely fix it - I'm a bit of a whiz at these things. ;)

Octothorpe: Well, I stripped everything out (including CSS) but the problem still exists. Have a look:
http://big10p.mysite.wanadoo-members.co.uk/
PLease ignore the crappy ISP banner at the top.

This page displays fine in IE but not in FF and Opera.

Change

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or in your case since you're not doing xhtml, simply:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Bingo! Thanks, Peter.

There's just one curiosity left: if I use this line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

everything displays as it should, in all 3 browsers, but, if I use this line:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

everything displays OK in FF and Opera, but in IE everything becomes left justified instead of centered.

Is it OK to use the fully working line, even though I'm not using xhtml?

You need an align="center" attribute in your table tag.

Ah, that might help. :P Thanks.