Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Table row height problem

    Ok basically I have a table with multiple rows, and two images inside a table data element per row, I am using these images as thumbnails you can click on to bring up the larger image, now the thumbnail size I'm using is 100x100, yet my table row height is permanently at 103.36px (according to IE developer tools) which is very odd, so there is a space at the bottom of the image between that and the border, I have tried EVERYTHING I can think off, I have commented out my whole CSS file just leaving the rules for the table and I still have these gaps, I have double even triple checked my html for problems and I can't find any

    One very odd thing; when I move the <link href="css/stylesheet.css" type="text/css" rel="stylesheet" /> element from the head to the very very top of my html file (above the DOCTYPE) these gaps disappear and one or two items on the page change position slightly

    An album of pictures to explaining my problem, from them you can see that this is mad: http://www.sendspace.com/filegroup/o...t9Yl9b6O4Z%2FA

    Thanks in advance

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there harvs899,

    and a warm welcome to these forums.

    Without a link or the code to help us, we can only guess at solutions.

    My guess, would be to add this...
    Code:
    img {
        display:block;
     }
    
    ...to your style sheet.

    coothead
    Last edited by coothead; 10-21-2012 at 07:18 PM.

  • Users who have thanked coothead for this post:

    harvs899 (10-23-2012)

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh my god, you beautiful person. It works! Thank you! Why was the fact it was being displayed as an inline (I assume) the problem?
    Last edited by harvs899; 10-21-2012 at 07:36 PM.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there harvs899,

    the "img element" is an "inline element", which means that it has text characteristics .

    The gap below is therefore dependent on the font size.

    Setting it to "display:block" is one of a few methods to remove it.

    Perhaps one of these links may help.....

    coothead
    Last edited by coothead; 10-21-2012 at 08:03 PM.

  • Users who have thanked coothead for this post:

    harvs899 (10-23-2012)


  •  

    Posting Permissions

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