Question

I have the following code

HTML:

<div class="dropShadow">
    <img src="images/headerimage" />
</div>

CSS:

div.dropShadow {
    background-image: url('dropshadow.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 19px; /* the height of the shadow */
}

however, on Firefox its all fine, where as on Chrome and IE, there is a small white space between the bottom of the image and the top of the positioned background image. I removed all the white space from around it, but I’m not sure what rules to try. Any suggestions?

Answer 1

Write vertical-align:top or display:block in your IMG. Write like this:

img{
 vertical-align:top;
}