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


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?


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.


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


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.


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.


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


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 = "";

Problem solved!