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
vinpkl
February 8, 2010, 3:42am
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
to add more info, I have that absolute div positioned in a fixed div on the page.
Cheers
Ryan
vinpkl
February 8, 2010, 4:35am
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
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
nits4u
February 10, 2010, 8:11pm
6
its better if you give the link of the pageā¦
casbboy
February 10, 2010, 11:29pm
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
<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!