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 (20)
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