Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Phantom Whitespace Below Img in Firefox
Posted on 07/22/2009 at 10:24 am by Kevin Wentworth
Viewed 12,847 times | 0 comments
I've come across this thing a few times before- there's a strange space below images in Firefox, but not in IE. I finally found a nice explanation as to why it happens, which I wanted to post here.
Images are displayed inline by default. When you are using an image as a block (like when you want an image to take up the entire top half of a page) you'll get some mysterious white space below the image, but only in Firefox. For once, IE actually seems to render the CSS appropriately.
The fix is simple
Add a display block to your CSS declaration for the img tag. Now, your image will display as a block without any phantom whitespace underneath the image.
- div#inside img {
- display: block;
- }
Another solution was to set the baseline to bottom, but I think setting the image to block is much more elegant, plus its semantically correct.
- div#inside img {
- vertical-align: bottom;
- }
Cheers,
-Kevin Wentworth
Tags for Phantom Whitespace Below Img in Firefox
Css | Hack | Firefox | Web Design
Comments for this Posting
No comments. Be the first to post a reply.
Sorry, comments are closed for this posting.
Please Email Kevin if you have any questions. Thanks!