SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry remove image padding in table td cell ?

    i really need to remove the grey space under my image in my <td>.

    I have set all my cellpadding and cellspacing to zero.

    It is fine in safari and firefox, but in ie there is an annoying space. here is the page

    http://www.imagex.co.uk/imagetest/

    and here is my code:-

    ----------

    <table width="900" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" align="center" height="25" bgcolor="#6d6a6a">

    <table height="25" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td height="25">
    <img src="buttonhome.jpg" name="a" border ="0">
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

  2. #2
    SitePoint Zealot JZ Design's Avatar
    Join Date
    Jun 2009
    Location
    Midwest U.S.
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wish i could help with your actual problem, but I would seriously consider dropping the tables altogether and start using some CSS with div's.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm going to take a guess here-It is the space left under an image for text. Add vertical-align:bottom to your image.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see:
    http://ipinfo.info/netrenderer/index....uk/imagetest/

    As Ryan stated:
    img { vertical-align: bottom; }

  5. #5
    SitePoint Member
    Join Date
    May 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems like that tag shouldnt be needed, seeing as my iage was 25px high and my td was 25px high, but it seems to have worked, thanks guys

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by diablogod View Post
    seems like that tag shouldnt be needed, seeing as my iage was 25px high and my td was 25px high, but it seems to have worked, thanks guys
    It always leaves room for child text descendants. Possible fixes are here.

    Your welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by diablogod View Post
    seems like that tag shouldnt be needed, seeing as my iage was 25px high and my td was 25px high
    Yes, it is needed. Images by default generate inline boxes. Inline boxes are by default aligned so that the text baselines line up. An image doesn't have a baseline, so the bottom of the image box will align against the text baseline of the cell. The baseline is always a few pixels above the bottom of the cell box, to leave room for the descenders of lowercase letters like 'g' and 'y'.

    Therefore, there will be a gap between the bottom of the image and the bottom of the cell if you use the default settings. If you don't want the gap you must tell the browser to align the image to the bottom of the cell (or use display:block to make it generate a block-level box instead).

    The height of your table cell is just a minimum height. If the content requires more space, the cell will expand. And your image needed 25px + a few pixels.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know it possibly sounds silly but just remove whats between the image and td tags, on images it will add one space

    <table width="900" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="2" align="center" height="25" bgcolor="#6d6a6a">

    <table height="25" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td height="25"><img src="buttonhome.jpg" name="a" border ="0"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No removing the white space in the HTML won't stop what inline generated boxes do by default (well I'm referringto the space left under images)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, but I swear to you if you take that white space out of the html there will not be a gap under the image. Try your code then mine in dreamweaver. I had this problem a few years ago. It takes all those spaces in your html between the imag tag and </td> and adds a character space under the image.


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
  •