www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Image Borders within a Table & IE Browser

  1. #1
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126

    resolved [RESOLVED] Image Borders within a Table & IE Browser

    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,

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    table img {vertical-align:bottom;}
    http://developer.mozilla.org/en/docs...ysterious_Gaps
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2006
    Posts
    10
    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.

  4. #4
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126
    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,

  5. #5
    Join Date
    Feb 2006
    Posts
    10
    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.

  6. #6
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126
    Quote Originally Posted by 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.
    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,

  7. #7
    Join Date
    Feb 2006
    Posts
    10
    Sorry, I should have specified that it is a style sheet setting for your table tag. Try this:

    Code:
    <!-- 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 -->

  8. #8
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126

    A Big Thanks

    Quote Originally Posted by Deprecated Tag
    Sorry, I should have specified that it is a style sheet setting for your table tag. Try this:

    Code:
    <!-- 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,

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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:
    Code:
    <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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles