IE space below image

[timjs]

Hi,

heres my html code:

<div id="headerMiddle">
<div id="navTabs">
<a href="#" ><img src="assets/main_tab_on.jpg" alt="1" /></a>
</div>
</div>

and heres my css:

img{border: 0px;}
#navTabs{margin:0px; padding:0px;}
#headerMiddle{border-bottom:1px solid #BDBDD2; margin:0px; padding:0px;}

Firefox puts the bottom border flush against the bottom of the image, but IE puts a 3px space betweem the image and the border at the bottom. How can I fix this in IE?

Hope someone can help...

Thanks,

Tim.

[BonRouge]

I'm guessing your image is about 17px high... This might help:#headerMiddle {
font-size:0;
}

[toicontien]

I've heard about making the font size smaller for an image to get rid of the white space beneath it. I'm not so sure that's the best method, seeing as Gecko browsers actually replace the image with the alt text. Reducing the font size of the image, or it's container will also reduce the alt text font size.

I give a more detailed explanation of the problem in the post below:

http://www.webdeveloper.com/forum/showpost.php?p=464021&postcount=6

[ray326]

Do you have a valid doctype? Have you tried img{display:block}?

[timjs]

Many thanks for your help guys, I shall try the above solutions, and hopefully sort this out.

[lokin]

I came across your question while trying to get more information on why IE actually does this. The problem is when you add an image to your page, you notice there is a 3px gap, or space below the image. ( IE adds padding below image). This is similiar to the function of Heading tags, in that the browser by default believes that there should be padding or space below the image! Atleast, this is what appears to be going on. I just stopped by to give you the fix while searching for the absolute answer. However, I do know how to fix it !!

How to fix it ?!!

*all open and close tags have been change to parenthesis to assure displayability*

Create a class tag that sets the margin to zero, and the display to block. Then associate this class with the image. For example;

(img class="blockIMG" src="yadda/yadda.jpg" alt="see jane run" /)

Your CSS will loook like this

.blockIMG
(
display:block;
margin:0;
)

Here's whats going on..

Images are inline objects and IE adds somekind of padding. There is little way to subtract or control margins / padding using CSS on inline elements!

Hence, change the image to a block level element, and then set the margin to zero! Voila, no more 3px ghost underneath your image in IE.


Notice: THis is not something that you want to go throwing on every image you can. Just add it when it's really neccessary.

Cheers,

Lokin

www.lokincrook.net

[lokin]

Or use vertical-align

The following quote is from 'Cascading Style Sheets Designing for the Web'
- by Hakon Lie

"Vertical-align applies to inline elements, including replace elements (images) that are inline. These images can be put on the baseline, centered vertically between lines, aligned with the top of the letters, or any of several other possibilities."

It appears that I was correct with my guess in that IE is setting the invisible box model around the image, and giving it white space below it (which is a baseline in text).
so another fix would be to use...

style="vertical-align:bottom;"

This doesnt always seem to work, yet it is an easier / lighter approach.

[atchdesigns]

The reason a small amount of what appears to be padding is often added to the bottom of images is due to the vertical-alignment of the image.

Images are displayed inline, and in IE this means they allow a space below for characters with a tail (eg g, j, p, q, y).

So theoretically the most appropriate solution is to use vertical-align:bottom, which will align the image to the lowest element in the line.

Yet another thing IE does inconsistently...

[felgall]

Either display:block or getting rid of the whitespace between the image and the surrounding tags will fix the problem. It is only when the image is display:inline and there is adjacent whitespace that it will leave gaps like that.

[WebJoel]

How to fix it ?!!
*all open and close tags have been change to parenthesis to assure displayability*
.... ....
.blockIMG
(
display:block;
margin:0;
) -I am having a hard time accepting this. I plan to try it to see if it pans out functionally but I almost believe that it will fail CSS validation. Valid code is important to me and it would be a very cold day in a very hot place however, before I personally would ever resort to this even if it does work :o . I do extend thanks for sharing it however, and I *will* be testing this myself soon. It just won't be appearing in any creation that I have any input upon. :) I try to avoid 'hack' whenever possible.

[felgall]

*all open and close tags have been change to parenthesis to assure displayability*

Well that is what the browser [code] and [php] etc tags are for as everything inside of those will display as typed and then you don't have any confusion with substituting one character for another.

[mattalexx]

I'm guessing your image is about 17px high... This might help:#headerMiddle {
font-size:0;
}

Thank you for this.

[vijaycorinthian]

hi,

I tried all solutions above:

a) tried the display:block

b) removed white spaces in td tags (ie I used tr and td tags without white space inbetween them. )

c) I tried using: padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Except for approach a) others didn't work on IE. So I found the ULTIMATE FIX !!! I have been tearing my head for 3 hours for this.

But the BEST SOLUTION I found is this: add a hspace=0 attribute to the Image tag. For example:

img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0"

This does the trick. You can check out our site for good examples of inline photobook images display.

David ( http://www.PrintersRose.com )
<a href='http://www.PrintersRose.com'> examples here </a>

[Kor]

The simple CSS

img{
display:block;
}

should do the trick