i have a container div which has a table inside it. in one of the table data i have image1 width=197 height=123, i want to position a small image image2 on top of image1 which has a width = 107 and height = 47 using positioning.

i want the small image image2 to be positioned at the top left corner of image1 so that it appears that image2 is on top of image1. i have tried using relative position for image1 and absolute position for image2 however i am getting different results in different browsers.

following is my code

<div class="divname">
<table width="199" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/image1.jpg" class="image1" /> <img src="images/image2.jpg" class="image2" />
</td>
</tr>
</table>
</div>

.divname{
float: left;
width: 199px;
height: auto;
padding: 0 10px 5px 10px;
}

.divname table td img.image1 {
position: absolute;
top: 0px;
left: 0px;
}

.divname table td img.image2 {
position: relative;
top: 0px;
left: 0px;
}

can someone tell me how to fix this.

thanks

In this example, you could actually remove everything related to the table and leave the div which can be positioned relative. Use absolute on both the images (or just the second one).

Absolute positioned items need a width and height. Give the second(top) image a z-index to be sure it is over the first.

i am getting the desired effect in ie 6 and 7 however in all other browsers the image 1 is appearing above from where it appears in ie

so if i move the top value then it will work for other browsers whereas in ie the image will move further down from the top left corner and i cannot use more than 1 stylesheet based on the backend system i have so i need to mention this positioning for all browsers in 1 css file only.

following is my code
.div{
float: left;
width: 199px;
height: auto;
padding: 0 10px 5px 10px;
position: relative;
top: 0px;
left: 0px;
}

.div table td img.img2 {
position: relative;
top: 0px;
left: 0px;
width: 197px;
height: 123px;
z-index: 1;
}

.div table td img.img1 {
position: absolute;
top: 0px;
left: 0px;
width: 104px;
height: 45px;
z-index: 100;
}

also i do not want to use image 2 as a background image and use image1 as img tag i want to use both the images as img tag only

please advice.

IE6 and 7 have real problems with positioning, so do NOT use them as a measure of what's 'right', they usually aren't! Firefox is showing the the correct rendering of your code.

You don't need the positioning anyway. Put image1 in as a background, and put image 2 IN the box - it will appear stacked on top of image 1.

thanks