[RESOLVED] huge problem in IE - the map is "fixed" and the page moves behind it !

[steamPunk]

Hi

I'm posting this in General because i don't know it the problem is caysed by CSS or JS or what ....

If you look at this page in Firefox you will see the page as it should
be - with the Google Map in the content of the page - when you scroll
the page the map moves too

http://www.materre.net/DEV/test-google-map.html

but if you look at it in IE 6 or 7 the map is "fixed" relative to the
browser window and the page moves behind it !!

Obviously it's the same CSS but something in IE is not happening

Has anyone had this problem ? Does anyone know how i can fix this ?

thanks

[Scriptage]

It's a CSS issue for sure, just looking into it now.

[steamPunk]

thanks

I was worried it was something to do with the scripting that resizes all the page elements to exactly fit the screen and the fact that the google map is generated dynamically

[Scriptage]

Try getting rid of the overflow:hidden; in your CSS, just out of curiosity.

[Scriptage]

The google map is placed outside of the content div for some reason, so when the div overflows it moves the content and not the map.

[steamPunk]

ah....

but if you look at the div nesting it definitely is inside - it's created as a node inside
<div id="carte" style="position:relative;display:block;width:600px;height:400px;margin-left:auto;margin-right:auto;">
</div>

- could there be something in the generated google code that takes it out of the document flow ?
and why doesn't this have the same effect on FireFox ??

this is doing my head in, lol

[Scriptage]

I'm just having a look at the google code now.

It is quite obfuscated so it may take a while (and I'm doing this in between serving customers).

The reason FireFox and IE do not render the same is because they both interpret the standards in different ways (or in IE's case not at all).

Regards

Carl

[Scriptage]

This google code is mad!

function fl(a){var b=arguments.callee;if(!b.Hl){b.Hl=1}var c=(a||"")+b.Hl;b.Hl++;return c}
function dk(a,b){var c,d;if(typeof a=="string"){c=cl;d=a}else{c=a;d=(b||"")+dl}if(!c[d]){c[d]=0}var e=++c[d];return new el(e,c,d)}
function ok(a){if(typeof a=="string"){cl[a]&&cl[a]++}else{a[dl]&&a[dl]++}}
gl.I=null;function gl(a,b,c){if(gl.I){gl.I.remove()}var d=this;d.d=a;d.f=j("div",d.d);de(d.f);ne(d.f,"contextmenu");d.p=[F(d.f,Th,d,d.Ug),F(d.f,Uh,d,d.af),F(d.f,N,d,d.Ye),F(d.f,Nh,d,d.Ye),F(d.d,N,d,d.remove),F(d.d,Uh,d,d. sw)];var e=-1,f=[];for(var g=0;g<y(c);g++){var h=c[g];Je(h,function(n,q){var s=j("div",d.f);ve(s,n);s.callback=q;f.push(s);ne(s,"menuitem");e=B(e,s.offsetWidth)});
if(h&&g+1<y(c)&&c[g+1]){var i=j("div",d.f);ne(i,"divider")}}for(var g=0;g<y(f);++g){Yd(f[g],e)}var k=b.x,m=b.y;if(d.d.offsetWidth-k<=d.f.offsetWidth){k=b.x-d.f.offsetWidth}if(d.d.offsetHeight-m<=d.f.offsetHeight){m=b.y-d.f.offsetHeight}p(d.f,new x(k,m));fe(d.f);gl.I=d}
gl.prototype.sw=function(a){var b=this;if(!a.relatedTarget||Kh(b.d,a.relatedTarget)){return}b.remove()};
gl.prototype.Ye=function(a){this.remove();var b=lh(a);if(b.callback){b.callback()}};
gl.prototype.Ug=function(a){var b=lh(a);if(b.callback){ne(b,"selectedmenuitem")}};
gl.prototype.af=function(a){me(lh(a),"selectedmenuitem")};
gl.prototype.remove=function(){var a=this;C(a.p,hj);Of(a.p);se(a.f);gl.I=null};
function hl(a){var b=this;b.c=a;b.Pn=[];a.contextMenuManager=b;if(!a.Qe()){L(a,Ci,b,b.Lw)}}
hl.prototype.Lw=function(a,b,c){var d=this;M(d,Nh,a,b,c);window


A different approach is needed me thinks.

[Scriptage]

Hmm,

I think the problem lies in the numbering convention that IE uses for the nodes in the DOM:

http://www.w3schools.com/dom/tryit.asp?filename=try_dom_nodetype_ievsmozilla

I read a solution to this problem somewhere (forcing IE into standards compliance) but cannot find it anywhere.

So in Firefox the map is appended to the child at position [1] and in IE at position [0] (thus in IE the map is appended to the document body not to the content div).

This is just a hypothesis though.

Maybe the guys over at the XML forum might be able to help us out.

Regards

Carl

[Fang]

html, body {
margin:0px;
padding:0px;
background-color:#E9E3D8;
height:100%;
width:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
/* overflow:hidden; */
}
#content{
/* overflow:auto; */
padding:20px 20px 0px 20px;
}

[steamPunk]

Scriptage - that's an amazing bit of deduction !

I put in a doctype that forced IE into standards compliant mode and it works - in IE7 at least (need to test in IE6) !!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

http://www.materre.net/DEV/test3.php

a thousand thanks for the time you spent on this :)

[Scriptage]

Not a problem, I'm glad it's working for you. I never thought of changing the doctype :rolleyes:

Regards

Carl