Relative Div Positioned Wrong in IE6&7 Only

I have a relative div placed inside a 1 pixel absolute div to allow it to float over other elements.


<div style="position:absolute; width:1px; height:1px;">
<div style="position:relative; width:376px; height:56px; background:url(/images/filmpop.png); left:180px; top:28px; padding:12px 14px 12px 14px; text-align:left; display:;" id="filmtop-info">

 </div>
</div>

The div is properly positioned on EVERY browser I tested it on, except for IE6 and IE7. Is there a way I can better get the div to position so it is exactly the same on all browsers?

Cheers
Ryan

absolute positioned divs are never the same on all browsers and all resolutions.

you need to use relative positioning to see them as same positioned in all browsers.

your main div should be relatively positioned.

vineet

to add more info, I have that absolute div positioned in a fixed div on the page.

Cheers
Ryan

if your parent div is relatively positioned then only child div will get positioned acording to resolution of screen at same position otherwise not.

so your absolute positioned div should be inside the relative positioned div.

vineet

Alright, I swapped and did opposite and had same misplacement. Turns out that when I moved the div structure shown to beginning of parent div (making it first thing), all browsers positioned it the same.

Thanks
Ryan

its better if you give the link of the page…

I put the div on all the pages of my site. When you see that top menu, just click any letter and the DIV comes popping in.

Go to: Movie Trailers

Ryan


<script>
var browser = navigator.appName;
var ver = navigator.appVersion;
var start = parseFloat(ver.indexOf("MSIE")) + 1;
var browVer = parseFloat(ver.substring(start + 4, start + 7));
if ((browser == "Microsoft Internet Explorer") && (browVer < 8))
{
    window.location = "http://www.sadtrombone.com/";
}
</script>

Problem solved!