Overlapping divs with links - IE6 inconsistency

[sami_azzawi]

Hi

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?

Thanks

[young72]

Do you have a link to the site? It's easier for a lot of people to look at what is going on. Thanks.

Just from what I have read, it sounds like an ie margin bug of some sort. But can't really tell without seeing example.

[Nadia P]

 <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>

looking at the above, is it correct, you have a few heights declared, overflow: hidden; twice......

If IE is dropping a div, it's generally because widths haven't been calculated correctly.

Could be the use of mixing absolutely position and relatively positioned divs... hard to say :-)

As mentioned, a link to the page would be good.

Nadia

[Centauri]

First problem I see is no units defined for top and left on the absolutely positioned div - 206 what?, 248 what? .... and referenced to what (is there a positioned parent?).

If you are putting this absolutely positioned div over the top of the relative one, why are you declaring it separately? - if it were defined within the other div, it will be positioned relative to it (ie top 0 and left 0 will be top left of container div).

I question the whole point of having the absolutely positioned div and the transparent image - why not just have the link as the first item in your relatively positioned div, and set its style as an absolutely positioned block of the correct dimensions?

[sami_azzawi]

Hi

Centauri, I tried putting the absolute div within the relative one as suggested and it seems to work fine. I guess its obvious in hindsight! Thanks very much for your help, and to the other posters as well.