Question

I’m having a problem with the overflow of negatively absolute positioned divs.

The image below represents what I’m trying to achieve. The main object is a div that is position:relative. The two protruding arrow tabs are divs that are position:absolute with negative values so that they sit outside of the parent’s perimeter.

This works fine in all browsers except IE7 and IE8 which cut the tabs off completely as if the parent object had the style overflow:hidden.

HTML:

<div id='parent'>
<div id='arrowLeft'></div>
<div id='arrowRight'></div>
</div>

CSS:

#parent{
position:relative;
width:600px;
height:400px;
}

#arrowLeft{
width:40px;
height:50px;
position:absolute; left:-40px; top:50%;
margin-top:-25px;
}

#arrowRight{
width:40px;
height:50px;
position:absolute; right:-40px; top:50%;
margin-top:-25px;
}

This is driving me mad. Does anyone know of a fix or a reason for this behaviour?

Thanks all, appreciate your time!

W.

Answer 1

I have found the reason for this happening (still doesn’t really make sense). I was fading in the image in a light box fashion and for some reason this was preventing the tabs from showing up in IE7 & IE8.

If anyone can offer any insight into the reason for this that would be appreciated. But for the time being I have just scrapped the fade for IE7/IE8 and kept it for newer browsers.

Many Thanks for your help @thirtydot!

W.

PS That fiddle site site looks pretty awesome!