[RESOLVED] Image Borders within a Table & IE Browser

[Bytes]

When I use this scripting:

<style type="text/css">
<!--

.border {1px solid #ffffff }

-->
</style>

Within these tables:

<!-- START PICTURE TABLE 1 -->
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" style="border-collapse: collapse border"><tr><td>
<img src="picts/about-1.jpg" border="0" width="140" height="280" onmousedown="whichElement(event)" alt="Web Site Design and Development Image">
</td></tr></table>
<!-- END PICTURE TABLE 1 -->
<br>
<!-- START PICTURE TABLE 2 -->
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" style="border-collapse: collapse border"><tr><td>
<img src="picts/about-2.jpg" border="0" width="140" height="140"onmousedown="whichElement(event)"alt="Web Site Design and Development Image">
</td></tr></table>
<!-- END PICTURE TABLE 2 -->

within this URL:
http://tda-digital.com/about.htm

The problem I am experiencing, in the IE browser, but not the Opera browser, is the 2 to 3 pixel "gap" at the bottom of each of the two pictures. Anyone having ideas on a fix would be deeply appreciated.

Regards,

[Fang]

table img {vertical-align:bottom;}
http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

[Deprecated Tag]

Hi Bytes,

The problem, I believe, is that IE allocates some space in your table cells for text, based on the default font size. Try adding 'font: 1px;' to your inline style in the table tag. This should remove the gap. The only downside to this solution is that if you want text in some of the cells, you have to include a div or span tag so that you can give them a reasonable font size.

[Bytes]

Fang & Deprecated Tag, I’ve tried both of your suggested methods, but to no avail:

.border { font: 1px }

and

.border {vertical-align: bottom }

Should you have additional suggestions for me try, I’d appreciate them.

Thanks,

[Deprecated Tag]

You need to add the 'font: 1px;' to your <TABLE> tags, it is not a border setting but a table setting that is causing the problem.

[Bytes]

You need to add the 'font: 1px;' to your <TABLE> tags, it is not a border setting but a table setting that is causing the problem.

I've added your suggested syntext, as follows:

<!-- START PICTURE TABLE 1 -->
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" font: 1px; style="border-collapse: collapse border"><tr><td>
<img src="picts/about-1.jpg" border="0" width="140" height="280" onmousedown="whichElement(event)" alt="Web Site Design and Development Image">
</td></tr></table>
<!-- END PICTURE TABLE 1 -->

But still to no avail, Is there something I'm doing wrong?

Thanks,

[Deprecated Tag]

Sorry, I should have specified that it is a style sheet setting for your table tag. Try this:


<!-- START PICTURE TABLE 1 -->
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" style="border-collapse: collapse border; font: 1px;"><tr><td>
<img src="picts/about-1.jpg" border="0" width="140" height="280" onmousedown="whichElement(event)" alt="Web Site Design and Development Image">
</td></tr></table>
<!-- END PICTURE TABLE 1 -->

[Bytes]

Sorry, I should have specified that it is a style sheet setting for your table tag. Try this:


<!-- START PICTURE TABLE 1 -->
<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" style="border-collapse: collapse border; font: 1px;"><tr><td>
<img src="picts/about-1.jpg" border="0" width="140" height="280" onmousedown="whichElement(event)" alt="Web Site Design and Development Image">
</td></tr></table>
<!-- END PICTURE TABLE 1 -->


"Perfect Fit" & works like a CHAMP - Many thanks for your knowledge in programming abilities and for your time to help me out!

Take Care & Thanks,

[Fang]

Using font: 1px; is a hack and should not be used.
Please read the link I gave which has 2 suitable solutions and copy solutions given correctly.
Another solution is to concatenate the td and img elements:<TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#ffffff" style="border-collapse: collapse border">
<tr><td><img src="picts/about-1.jpg" border="0" width="140" height="280" onmousedown="whichElement(event)" alt="Web Site Design and Development Image"></td></tr>
</table>