SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    White space between pics in divs in FF3

    Hello again,

    I have placed two images in the same div with links to a larger version of the image.

    It works fine in all the major browsers except Firefox3 (Unfortunately I can't run 2 alongside 3, but my client has previewed it in FF2 and hasn't mentioned the problem, so it may not appear in FF2).

    In FF3 there is a white band between the images. If this is going to be an ongoing problem with FF3, it would be handy to know how to get rid of the white band.

    Any ideas please.

    http://www.frank.uk.com/html/pages/i...dex_drink.html

    Thanks again

  2. #2
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    260
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    In Firefox 2 there is a small white gap between the top and bottom pic, is that what you mean? Should they be flush?

  3. #3
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, in the other browsers they are flush and that is how I want them in FF

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the same in Opera 9.5, and that's the correct rendering. Any browser that doesn't show a gap is not CSS-compliant.

    Images are (replaced) inline elements and partake in what's known as an inline formatting context. One aspect of this is the vertical alignment of the inline box within the surrounding line box.

    The initial value for the vertical-align property is baseline. In the case of an image, which doesn't have a baseline, that means the bottom edge of the image is aligned with the baseline of the line box. The baseline is a few pixels above the bottom of the line box, to leave room for the descenders of lowercase letters like 'g'.

    That's why you get the gap.

    To remove the gap, you should align the image with the bottom of the line box by using vertical-align:bottom.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Tommy. I've put it in my notebook for next time.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    260
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Me too, I didn't know that either. Thanks.


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
  •