SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mysterious gap in table row

    Hey, all! I'm working on a design, and I seem to have most of the kinks worked out besides one minor thing.

    Here's the site: http://www.adampolselli.com/jul/

    In FireFox and Safari, there's a small gap under the thumbnail photos. The gap does not exist in IE6. Anyone know what's goin' on? Here's some of the code to help:

    Code:
      <table id="photoinfo" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td class="title">Title</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/2004/07/25/chillin.php" title="Permanent Link to This Entry">Chillin’</a></td>
      </tr>
      <tr>
      <td class="title">Subject</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/cat_color.php">Color</a>, <a href="http://www.adampolselli.com/archives/cat_still_life.php">Still Life</a></td>
      </tr>
      <tr>
      <td class="TNtitle">Previous</td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/13/flowers.php" title="Flowers: July 13, 2004"><img src="uncledTN.jpg" alt="Flowers: July 13, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/16/salty_peanuts.php" title="Salty Peanuts: July 16, 2004"><img src="peanutsTN.jpg" alt="Salty Peanuts: July 16, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/17/stamen.php" title="Stamen: July 17, 2004"><img src="stamenTN.jpg" alt="Stamen: July 17, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/18/glowing_leaf.php" title="Glowing Leaf: July 18, 2004"><img src="glowingleafTN.jpg" alt="Glowing Leaf: July 18, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/22/leaf.php" title="Leaf: July 22, 2004"><img src="leafTN.jpg" alt="Leaf: July 22, 2004" width="94" height="70" /></a></td>
      </tr>
      </table>
    Code:
      table#photoinfo { margin: 0; padding: 0; font-size: 10px; width: 550px; border-bottom: 2px solid #FFF; }
      table#photoinfo a { color: #333; font-weight: normal; }
     td.title { background: #666 url(photoinfobg.gif) repeat 0 0; color: #FFF; padding: 2px 4px 2px 0; text-transform: lowercase; text-align: right; border-bottom: 1px solid #FFF; width: 71px; }
     td.entry { background: #CCC; color: #333; text-align: left; padding: 2px 0 2px 4px; border-bottom: 1px solid #FFF; border-left: 1px solid #FFF; }
     td.TNtitle { background: #666 url(photoinfobg.gif) repeat 0 0; color: #FFF; padding: 2px 4px 0 0; text-transform: lowercase; text-align: right; vertical-align: top; }
      td.TNentry { background: #FFF; border-left: 1px solid #FFF; }
    I know it's kind of a lot to go through, but I'm hoping there's a quick fix that I just can't seem to put my finger on.

    Thanks in advance!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Code:
    <table id="photoinfo" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td class="title">Title</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/2004/07/25/chillin.php" title="Permanent Link to This Entry">Chillin’</a></td>
      </tr>
      <tr>
      <td class="title">Subject</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/cat_color.php">Color</a>, <a href="http://www.adampolselli.com/archives/cat_still_life.php">Still Life</a></td>
      </tr>
      <tr>
      <td class="TNtitle">Previous</td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/13/flowers.php" title="Flowers: July 13, 2004"><img src="uncledTN.jpg" alt="Flowers: July 13, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/16/salty_peanuts.php" title="Salty Peanuts: July 16, 2004"><img src="peanutsTN.jpg" alt="Salty Peanuts: July 16, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/17/stamen.php" title="Stamen: July 17, 2004"><img src="stamenTN.jpg" alt="Stamen: July 17, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/18/glowing_leaf.php" title="Glowing Leaf: July 18, 2004"><img src="glowingleafTN.jpg" alt="Glowing Leaf: July 18, 2004" width="94" height="70" /></a></td>
     <td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/22/leaf.php" title="Leaf: July 22, 2004"><img src="leafTN.jpg" alt="Leaf: July 22, 2004" width="94" height="70" /></a></td>
      </tr>
      </table>
    just remove the enters between <td>s write them adjusant to each other. you will find the gap is not there.

    you can use this also
    Code:
    <table id="photoinfo" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td class="title">Title</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/2004/07/25/chillin.php" title="Permanent Link to This Entry">Chillin’</a></td>
      </tr>
      <tr>
      <td class="title">Subject</td>
     <td class="entry" colspan="5"><a href="http://www.adampolselli.com/archives/cat_color.php">Color</a>, <a href="http://www.adampolselli.com/archives/cat_still_life.php">Still Life</a></td>
      </tr>
      <tr><td class="TNtitle">Previous</td><td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/13/flowers.php" title="Flowers: July 13, 2004"><img src="uncledTN.jpg" alt="Flowers: July 13, 2004" width="94" height="70" /></a></td><td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/16/salty_peanuts.php" title="Salty Peanuts: July 16, 2004"><img src="peanutsTN.jpg" alt="Salty Peanuts: July 16, 2004" width="94" height="70" /></a></td><td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/17/stamen.php" title="Stamen: July 17, 2004"><img src="stamenTN.jpg" alt="Stamen: July 17, 2004" width="94" height="70" /></a></td><td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/18/glowing_leaf.php" title="Glowing Leaf: July 18, 2004"><img src="glowingleafTN.jpg" alt="Glowing Leaf: July 18, 2004" width="94" height="70" /></a></td><td class="TNentry"><a href="http://www.adampolselli.com/archives/2004/07/22/leaf.php" title="Leaf: July 22, 2004"><img src="leafTN.jpg" alt="Leaf: July 22, 2004" width="94" height="70" /></a></td></tr>
      </table>
    This will solve ur problem. No SPACE at all.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion, but I'm afraid it didn't work!

    http://www.adampolselli.com/jul/

    There's still a gap in Safari and FireFox.

    Anyone else?
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been working on this issue, and I've narrowed it down to something really strange: the DOCTYPE.

    With <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> the gap disappears.

    But I'm using <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, and with this the gap appears!

    Pardon my language, but WTF?! Please help!
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What a coincidence that you used the phrase "mysterious gap" in the title:

    Eric Meyer, via Netscape DevEdge: Images, Tables, and Mysterious Gaps


Bookmarks

Posting Permissions

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