Inline images showing a gap of space on the bottom, and one way to get around it
For a current project, I'm needing to post an image of a calendar inline with some select boxes. The calendar image would serve to popup a table of calendar dates. It is to look like this:
Here was the html to be used:
<p> <select name="checkInDay"> <option value="">Day</option> </select> <select name="checkInMonth"> <option value="">Month</option> </select> <a class="ico-cal" href="#"> <img src="images/ico_calendar.gif" alt="Select" /> </a> </p>
The problem was that a small gap of space was appearing under the calendar icon, so that it looked like this:
Firefox example
Safari example
IE example
In doing some research, I came across this page, which had a very good description of the problem. It turns out that the gap under the image is present for a reason - for the descenders of text that reside on the same line as my image
For instance, my image was treated the same way as a lowercase 'o'. If that 'o' were sitting next to a lowercase 'p', we'd see that room was made for the stem of that 'p'.
According to that page, there were two ways of getting around the problem. One was to set the image to be a block element using 'display:block;'. That didn't work so well for me, as it would have required a handful of other css declarations to keep the img inline with the rest of the sentence and at proper spacing from the other selects.
Instead, I went with the second suggestion, which was to use the vertical-align property in the css file. Since I develop in Firefox first, I found that vertical-align:sub; worked, like so:
a.ico-cal img {vertical-align:sub;}Firefox example
Safari Example
... but this did not work IE 6 or 7, which displayed vertical-align:sub; like so:
IE example
Yikes. So it turns out IE doesn't treat vertical-align:sub the same way Firefox and Safari do, but I did find that IE will display it correctly using the following:
a.ico-cal img {vertical-align:bottom;}
So I used my IE conditional comments (referenced here) to serve vertical-align:bottom; only to IE, and now all browsers show the image inline in the ideal manner.
Comments (31)
Al said:
Hi, am I correct in thinking that if you want to implement this technique you cannot use an external .css file to do it. e.g. you need to put the conditional statements into the head of each page?
/*In your .css file*/ a.ico-cal img {vertical-align:sub;}<!--In each page--> <!--[if IE]> <style type="text/css"> a.ico-cal img {vertical-align:bottom;} </style> <![endif]-->Cheers Al# February 12, 2007 5:54 AM
Al said:
Oops, sorry I've misinterpreted the posting rules in my second block hopefully this will work better. Preview didn't work with my first post.
# February 12, 2007 6:10 AM
CSS Guy said:
@Al:
You can use external files if you want. You would still call those external files unique for IE (and unique by version, if you wish) by using conditional comments.
# February 12, 2007 8:59 AM
dlee said:
I have tried img {vertical-align:sub;} but there is still little space left at the bottom of an image.
One method that I found to remove space below image element is using negative margin. Adding img {margin-bottom: -3px;} seems to take care of the problem. It was tested on FF 2.0, IE 6, and IE 7.
# April 28, 2007 9:10 PM
CSS Guy said:
@dlee:
As with math, there is more than one way to arrive at a solution. Thanks for sharing the negative margin idea.
# April 29, 2007 10:36 AM
Keith said:
Thanks for the tip! It helped when designing some emails for a client... that extra space was driving me mad when doing browser testing.
# May 11, 2007 8:50 AM
Tan said:
found your tips on google. really saves my day. had the same problem. thanks heaps!
# May 18, 2007 5:59 PM
Emil Wojak said:
Great! This is just the problem I had as well! Thanks for the thorough explanation.
# June 13, 2007 5:33 PM
Steve said:
thanks. this helped out a lot.
# June 20, 2007 6:48 PM
oedalis said:
This is driving me nuts. I've tried all the suggestions and nothing seems to work, except where it works too well, leaving my image without any room to breathe at all. The vertical-align property doesn't seem to do anything or it undoes the left align when that is present (my image ends up with a huge space to the right of it). The margin-bottom property only works as well as vspace---"-3" doesn't do anything but "-4" squishes the text right up underneath the image with no space (for vspace it does this at "-2" or it doesn't do anything at all). I think this design will be a wash in this respect but any tips for the future?
--O
# July 18, 2007 11:43 AM
Natalia said:
Thank you very much! The solution with display:block has helped - I'm really happy :)))
# August 14, 2007 3:01 PM
cs said:
There is actually a rather simple solution. I'm not sure why it works but it if you take out any space between the a tag and the next block tag (in this case the closing p tag). It will also get rid of the space. Like this:
<p>
<select name="checkInDay">
<option value="">Day</option>
</select>
<select name="checkInMonth">
<option value="">Month</option>
</select>
<a class="ico-cal" href="#">
<img src="images/ico_calendar.gif" alt="Select" /></a></p>
# October 26, 2007 1:14 AM
Ahmad said:
Thanks a lot! I was going crazy with this additional gab being placed at the bottom of my image in IE. I used vertical-align:bottom; and that fixed my issue!
# November 10, 2007 12:23 AM
Ianc said:
Thanks very much, this little gem of information has saved me from a numerous major headaches. Thank you
# November 21, 2007 5:48 AM
yst said:
thanks a lot!
# December 13, 2007 5:13 AM
Stuart said:
Thanks a bunch
# January 6, 2008 8:47 PM
Julia said:
Please help!
In Mozilla everything is the way it supposed to be, IE and AOL shorten my background image and rise lower navigation up!
I've tried all possible ways to align my divs with background image and bottom navigation for IE and Mozilla - but it's all not cooperating.
Thank you,
Julia
# April 23, 2008 1:29 PM
Susanna said:
Thanks. This has been driving me crazy! Display:block worked for me. I don't have any other images inline with the problem image, so that worked fine. If I ever have the same situation as you, I will reference this article again.
# June 19, 2008 9:52 AM
Kelvin said:
I tried to implement with block, however everything after the tag automatically move to the next line.
Fyi , I place the img in the same line as text (without any tables.).
I hope to use vertical-align but I thought that doesn't comply with the standard?
# August 22, 2008 2:55 AM
Printoutlet said:
Thank you for the insights. Hopefully the new Internet Explorer 8 will be more compliant with the CSS standards.
# September 29, 2008 3:50 PM
Brock Tucker said:
THANK YOU! I've been fighting with this problem for a week now and couldn't find the solution. Your page showing up on google was a godsend.
# November 10, 2008 11:49 AM
Roger said:
Thanks for sharing this tip. It driven me crazy each time a new project comes.
Also thank dlee for sharing the negative number tip, it saves the work of checking browser compability.
# December 31, 2008 1:02 AM
Jack said:
Thanks so much for sharing this, I've been having this issue for ages.
# January 27, 2009 8:22 AM
Chris said:
Thank you so much. I've been looking for this for ages. Thanks again.
# April 16, 2009 4:35 PM
Mark said:
I had a row of images in their own that was having the 'gap under the image' issue.
My solution was simply to set the css 'line-height' property to '0' for this . This effectively gets rid of the space for the descenders in 'p' and 'q' etc.
CSS:
#mydiv {
line-height: 0;
}
# June 15, 2009 4:27 AM
Magnus said:
Great! Had the same problem and found this page when Googling around :)
Saved my day!
# August 29, 2009 3:55 AM
Curt said:
Thanks. I spent a couple hours trying to fix this problem with no luck. This fixed it!
# September 28, 2009 7:19 PM
Cudden T said:
Awesome tip! I went back to a few old sites and finally fixed this daemon.
T
# October 2, 2009 1:16 PM
Nur Çeyiz ve Evtekstili said:
Thank you for the insights. Hopefully the new Internet Explorer 8 will be more compliant with the CSS standards.
Nevresim takımı,çeyizlik nevresim, çeyiz söz bohçası, çeyiz bohça, dantel, piko
# October 23, 2009 3:23 AM
Aad said:
img { display : block }
# January 27, 2010 3:12 PM
cheat point blank said:
My solution was simply to set the css 'line-height' property to '0' for this . This effectively gets rid of the space for the descenders in 'p' and 'q' etc.
# August 16, 2010 7:23 AM