Relative Div Positioned Wrong in IE6&7 Only

HTML & CSS
1

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

2

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

3

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

Cheers
Ryan

4

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

5

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

6

its better if you give the link of the page…

7

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

8 

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