CSS Image overlap issue

programming web dev
1

Im trying to overlap 2 images.

The css has this:


.imgHeader { position:relative; top: 0px; left: 0px; z-index: 1; }
.imgNews { position:relative; top: -42px; left: 0px; z-index: 2; }

The html has this:


<img class=imgHeader src="images/headerPics.jpg" height="42" width="100%" border="0">
<img class=imgNews src="images/newsItems.jpg" border="0">

Now the overlap works fine, however i have a big empty block underneath the images. When i do a select all i see that the empty block is part of the image that is on top. Anyone know why this is happening?

Cheers.