SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Jun 19, 2008, 03:56 #1
- 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
-
Jun 19, 2008, 03:59 #2
- 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?
-
Jun 19, 2008, 04:58 #3
- 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
-
Jun 19, 2008, 05:28 #4
- 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
-
Jun 19, 2008, 05:50 #5
- 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.
-
Jun 19, 2008, 06:05 #6
- Join Date
- Nov 2005
- Posts
- 260
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Me too, I didn't know that either. Thanks.
Bookmarks