SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast darkhorse162's Avatar
    Join Date
    Oct 2006
    Location
    Duluth, MN
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE v.s. FireFox Image padding

    Okay, I am sure this has been asked before but I couldn't find it anywhere, so maybe there is no solution. I have had this problem all of the time and have never found a way around it. Whenever I have any image on a web page, no matter what I set for padding and margins, IE still leaves a gap under every image. I've tried tables, divs, setting the padding: 0px;margin: 0px; and nothing works unless I set the bottom margin on the image itself to -3px or more to get rid of the gap...but then this screws things up on FireFox. This is probably the number one most frustrating problem for me - so if anyone knows anything, PLEASE FILL ME IN! Thanks!
    .:::darkhorse162:::.

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It could be IE setting the image on the text baseline. Try vertical-align:bottom and see what happens.

  3. #3
    SitePoint Enthusiast darkhorse162's Avatar
    Join Date
    Oct 2006
    Location
    Duluth, MN
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    amazing. thank you for your wisdom. i sure hope this works in all situations where i have had this problem!
    .:::darkhorse162:::.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, that's not necessary. Just set the image as a block-level element and you'll be fine.

  5. #5
    SitePoint Enthusiast darkhorse162's Avatar
    Join Date
    Oct 2006
    Location
    Duluth, MN
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is the css for setting an image as a block-level element?

    is it
    Code:
    img {
        display: block;}
    ?

    I am having problems with images in IE, it seems to add extra padding or something to the image within a div, though I have the image padding and margins both set to zero...and I have been using the vertical align property as well. It will set it to the top of the div or the bottom of the div, but there is still space between the image and the top or the image and the bottom. I can't get the div to shrink right down to the image borders like it should and does in other browsers....


    I tried using the display: block; it keeps the image top aligned in the div without using any vertical-align property, but there is still extra space between the bottom of the image and the bottom of the div in IE.
    .:::darkhorse162:::.

  6. #6
    SitePoint Enthusiast darkhorse162's Avatar
    Join Date
    Oct 2006
    Location
    Duluth, MN
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing. I found a solution:

    Code:
    img {display: inline-block;}
    Can people please confirm this that it is cross-browser friendly in Windows and Mac browsers? Thanks.
    .:::darkhorse162:::.

  7. #7
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure it isn't the image itself containing spaces around it and included as part of the image?

  8. #8
    SitePoint Enthusiast darkhorse162's Avatar
    Join Date
    Oct 2006
    Location
    Duluth, MN
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, I added a border around it in the css and a border around the div so I could see their exact sizes and spacing.
    .:::darkhorse162:::.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I've got a hunch that the image in question doesn't have a very large height??
    Try
    Code:
    img { display: block; overflow: hidden; }


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
  •