IE7 Displays Whitespace afer png

Question

I have a div that contains a PNG background-image. After the div is displayed on my web page in IE7, there is a whitespace between the div and footer. All other browsers (incl. IE8) display the PNG correctly. Any ideas on a resolution would be appreciated?

Answer 1

Just a thought here, but maybe it's the browser's stylesheet that is adding that whitespace?

Try using a CSS Reset.

Answer 2

It's very likely you have white space surrounding your img tag which renders a single white character in IE6 and IE7.
I assume your code looks like:

<div>
    <img/>
</div>

Try making it:

<div><img/></div>

So:
- no whitespace
- no new line characters

Answer 3

Forcing the browser to treat the image as a block element should nullify any inherited margins that it is given. Try this:

<style type="text/css">
.blockify { display: block; }
</style>

<img src="/path/to/my/image.png" width="100" height="100" class="blockify" />

Keep in mind that your image now behaves like a DIV tag. So apply your formatting / positioning accordingly. For example, if you want to center your graphic, you should do so like any other DIV element:

<style type="text/css">
.blockify { display: block; margin: 0px auto; } 
/* auto margins help center block elements */
</style>