I would appreciate any suggestions for the following problem.

I have a rectangular div in the middle of a page, which itself contains some divs. The point is that this div will contain some text and imagery and on top of it all I will have a div that contains a transparent image which will link to another page.

The code that goes in the main div is the following:

<div style="position:absolute; top:206; left:248; z-index: 2;"><a href="http://www.google.com"><img src="img/trans.gif" width="529" height="271" border="0"></a></div>

<div style="position:relative; background:url(img/main_promo_bg.gif) #4099ce; width:100%; height:100%; margin:0; height: 272px; overflow: hidden; height: 272px; overflow: hidden; z-index: 1;"></div>

Above, I have two sets of divs, ordered with z-index. I have stripped it bare of any text/images apart from the background and the transparent gif layer that overlaps it.

NOW the problem. The above code works in both Firefox and IE7 but not in IE6 (not sure about other browsers). In Firefox and IE7, a transparent gif layer is created within the overall rectangular div, which links to google, as expected. HOWEVER, in IE6, the transparent gif layer moves down and right from the desired position and floats outside of the main div. It seems as if the positioning I have given it does not work correctly in IE6 and the starting point of the positioning is in fact different.

Anyone know how I can fix this so it works in IE6 as well?