SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container problem - getting an extra 6px added to height

    I have a little CSS problem I can resolve and I'm hoping someone can help me out.

    I am adding an author box to a WordPress site and I'm inserting the authors' gravatar into this box. I enclosed the IMG tag in a div that sets 5px padding all around the image to create a small border. The image itself is 96px wide and tall with its border, margin and padding all set to zero (0). For some reason that I can't figure out, there is an extra 6px added to the height of the div (for a total height of 102px) which I can see from within Firebug. This causes the visual border I am trying to create to be larger on the bottom than the border on the other three sides.

    Here is a link to a post where you can see the problem (the author box appears below the post): http://www.drkarenruskin.com/1848/ec...s-to-consider/

    Any ideas of where the extra 6px are coming from and how I can eliminate them?

    Eric

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,037
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    That's padding caused by the image being an inline element.

    Add display: block to the image:

    Code css:
    .author-image img {
      display: block
    }

    Solves it for me
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ScallioXTX,

    Thanks so much for your help. That did indeed correct the problem.

    I'm curious however to understand why an inline level element would add extra space like that. I searched online for an explanation but couldn't find anything. Are you able to explain why this happens or do you know of an online article that covers this issue?

    Eric

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,037
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    You can take a look at this: https://developer.mozilla.org/en/Ima...ysterious_Gaps

    Instead of "cell table" read "div"; same principle holds
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    That article was a great explanation of the mechanics behind this issue and now that I understand it, hopefully I'll remember what to do if and when I encounter this again.

    Thanks so much for the link and your help!

    Eric


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
  •