Question

This code below works perfectly for all browsers except IE 7 or 8.

<img src="images/image1.png" usemap="#map1" width="669" height="300" border="0">    
<map name="map1">    
  <area shape="rect" coords="80,120,182,226" href="XXXXX" target="_top" >    
</map>    
<div style="background : url(images/image2.png) repeat-y; height:auto; width:669px;">    

<?
if ($count==0)
{
?>

table width="550">    
tr>                     
td>    
div >    
center>    
    Sorry there is not information right now to show. <br/>    
Please <a href="" target="_top">click here</a> to go to our home page.<center>     
/div>    
/td>    
/tr>    
/table>    
?
}  
else {}
/div>
img src="images/image3.png" width="669" >

in the CSS:
td {
vertical-align: top;
}

The problem in IE is that after image1.png i can a white space in between and the next image, image2.png is being shown after the blank white space. you can paste this code and check it yourself. I am not able to figure out why this is happening?

is there anyway where i can check if the browser is IE and if so, then push image2.png little upwards so that the blank space is covered? any suggestions?

Additional Info:
I do have another image, image3.png, but this image is not showing any blank spaces on loading.

I tried to use jpg images but still the same.

Answer 1

Your IMG is an inline element and is implicitly inside a block. This block also contains some “text”: the whitespace before the the DIV. Default vertical-align for the image is “baseline”, so the whitespace that you see is the space under the baseline of text (the space where e.g. the the lower circle in letter “g” is).

To fix this, you have at least these options:

• Remove all whitespace between IMG and DIV (and perhaps put IMG within its own DIV)
• Set the style=”vertical-align: bottom” on the IMG