SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xhtml table issues

    Hi, does anyone have any ideas for this little problem: I have a navigation table running across the top of my page. The navigation part is a nested table and it's center aligned. I have extendable cells on either side with background images so that the navigation bar runs 100% of the page.

    The problem is that in stricter browsers like Mozilla and Netscape 7 (I'm on a Mac) I get a one pixel space at the bottom of the extendable images. IE 5 gives me no such problems.

    I have tried inserting
    td img {display: block;
    in my css sheet, but no dice.

    Url is:
    here

    Code is:
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="49%" valign="top" background="../images/background.gif">
    <img src="../images/background.gif" width="1" height="131" alt="" align="right" border="0"></td>
    <td width="2%" valign="top" align="center">
    <table align="center" width="724" border="0" cellpadding="0" cellspacing="1">
    <tr>
    <td height="41" colspan="5">&nbsp;</td>
    </tr>
    <tr>
    <td width="202" height="15" align="center" valign="middle" bgcolor="#FF9933">
    <a href="../company/index.php" class="navwhitelink">Company Information</a></td>
    <td width="129" align="center" valign="middle" bgcolor="#CC9900"><a href="index.php" class="navwhitelink">WebThing</a></td>
    <td width="129" align="center" valign="middle" bgcolor="#FF9933"><a href="../typecast/index.php" class="navwhitelink">TypeCast</a></td>
    <td width="129" align="center" valign="middle" bgcolor="#FF9933"><a href="../filmlink/index.php" class="navwhitelink">FilmLink</a></td>
    <td width="129" align="center" valign="middle" bgcolor="#FF9933"><a href="../support/index.php" class="navwhitelink">Support</a></td>
    </tr>
    <tr>
    <td height="72" colspan="5" valign="bottom" bgcolor="#FF6633"><p class="navwhitehead">WEBTHING</p></td>
    </tr>
    </table>
    </td>
    <td width="49%" valign="top" background="../images/background.gif">
    <img src="../images/background.gif" width="1" height="131" alt="" align="left" border="0"></td>
    </tr>
    </table>
    many thanks for any thoughts

  2. #2
    SitePoint Columnist Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://devedge.netscape.com/viewsource/2002/img-table/ should have everything you need to know

  3. #3
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'd already read that page and unfortunately none of their suggestions work. I tried setting all the images to blocks, and I tried using vertical-alignment. Both did nothing. Any other ideas, or do I have to bite the bullet and scrap the table aspect entirely?

  4. #4
    SitePoint Zealot itsyM's Avatar
    Join Date
    Jul 2002
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the DTD line from your page. For example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    Removing the DTD has worked for me when Mozilla / Netscape 7 has added some extra space under images. This is not a good option as it makes validation harder.

  5. #5
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I did try that too. And it does work. However, as you say, it's not necessarily a good option. Thanks anyway,


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
  •