Google Maps + Dropdown menu in IE6

[Skipito]

Beste,

Ik heb een dropdown menu (met CSS & Javascript gemaakt). Om het echter op internet explorer 6 te laten werken, moest er een Javascript bij. Dit werkte allemaal heel goed.

Echter, wanneer ik een Google map code probeer te plaatsen op dezelfde pagina als die van mijn dropdown menu, werkt die dropdown menu niet meer.
Ik denk zelf dat het een ''botsing'' is tussen 2 javascripts.. Maar ik weet het niet zeker.

Weet iemand misschien hoe je dit kan oplossen?

Javascript van het dropdown menu:

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Google maps code:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.nl/maps?hl=nl&amp;q=google+maps+javascript+doesnt+work+with+&amp;ie=UTF8&amp;ll=52.345532,4.8922&amp;spn=0.062731,0.099487&amp;output=embed"></iframe><br /><small><a href="http://maps.google.nl/maps?hl=nl&amp;q=google+maps+javascript+doesnt+work+with+&amp;ie=UTF8&amp;ll=52.345532,4.8922&amp;spn=0.062731,0.099487&amp;source=embed" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>

Heel heel heel erg bedankt!!!

 

[csshunter]

Hoi Skipito,
Het javascript is het normale Suckerfish-javascript, en zou sowieso nooit problemen mogen opleveren.
De Google-codes, met de Google-javascripts, zitten ingepakt in een <iframe>, d.w.z. die worden in een doorkijkvenster getoond: oftewel de Google-map is een aparte pagina: op de site van http://maps.google.nl/.
Scripts van de ene pagina kunnen nooit interfereren ("botsen") met scripts van een andere pagina van je eigen site (tenzij je dat met cookies zou regelen, maar dat is hier niet het geval).
En scripts kunnen gelukkig al helemaal niet iets doen met pagina's op een andere site (en daar dus ook niet mee interfereren), anders zou het hek van de dam zijn voor allerlei "kwaadwillenden" die dan een mooie gelegenheid zouden hebben om ongein uit te halen.

Kortom, ik denk dat het niet aan het javascript ligt. Heb je al eens geprobeerd het javascript uit de pagina te halen en dan in Firefox te kijken wat er gebeurt? - Dan zou het dropdown-geval gewoon moeten werken. *)

Als dat niet zo is, vermoed ik dat het de bedoeling is dat de dropdown zich over het gebied van de Google-map in het <iframe> heen uitrolt, maar dat dat niet lukt. Klopt dat?

En .. heb je misschien een link naar een testpagina, waarop dit zich afspeelt?

Met vriendelijke groet,
CSShunter
______________________
*) De regel "if (window.attachEvent)..." is iets dat alleen door Internet Explorer wordt begrepen, dus de rest doet daar niets mee.

 

[Skipito]

Hoi Skipito,
Het javascript is het normale Suckerfish-javascript, en zou sowieso nooit problemen mogen opleveren.
De Google-codes, met de Google-javascripts, zitten ingepakt in een <iframe>, d.w.z. die worden in een doorkijkvenster getoond: oftewel de Google-map is een aparte pagina: op de site van http://maps.google.nl/.
Scripts van de ene pagina kunnen nooit interfereren ("botsen") met scripts van een andere pagina van je eigen site (tenzij je dat met cookies zou regelen, maar dat is hier niet het geval).
En scripts kunnen gelukkig al helemaal niet iets doen met pagina's op een andere site (en daar dus ook niet mee interfereren), anders zou het hek van de dam zijn voor allerlei "kwaadwillenden" die dan een mooie gelegenheid zouden hebben om ongein uit te halen.

Kortom, ik denk dat het niet aan het javascript ligt. Heb je al eens geprobeerd het javascript uit de pagina te halen en dan in Firefox te kijken wat er gebeurt? - Dan zou het dropdown-geval gewoon moeten werken. *)

Als dat niet zo is, vermoed ik dat het de bedoeling is dat de dropdown zich over het gebied van de Google-map in het <iframe> heen uitrolt, maar dat dat niet lukt. Klopt dat?

En .. heb je misschien een link naar een testpagina, waarop dit zich afspeelt?

Met vriendelijke groet,
CSShunter
______________________
*) De regel "if (window.attachEvent)..." is iets dat alleen door Internet Explorer wordt begrepen, dus de rest doet daar niets mee.

Beste,

Hartelijk dank voor je reactie & uitleg.

Ik heb hier een pagina met een Google Maps:
http://www.am-plaza.com/voorbeeldpagina/met

En hier zonder een Google Maps:
http://www.am-plaza.com/voorbeeldpagina/zonder

Met alleen internet explorer 6, of 5.5, doet het dropdown menu het niet als ik het met Google maps gebruik. Bij alle andere browsers doet hij het uitstekend.

MVG,

 

[csshunter]

Hoi Skipito,
Goed nieuws!
Maar eerst even het slechte nieuws: je pagina is geen geldige html, en heeft 35 Errors, 22 warnings volgens de html-validator. En valid html is de eerste vereiste voor een goed werkende pagina!

• Er zit een afsluitende </div> te weinig in. Daarmee zijn de verschillende boxen op de pagina niet goed gedefinieerd: de browsers moet maar raden waar ze die ontbrekende </div> neer gaan zetten.
• De javascripts zijn niet voorzien van de //<![CDATA[ opmerking aan het begin, en //]]> aan het eind.
• En nog wat kleintjes.

Het al of niet aan boord hebben van een <iframe> met de Google-map er in maakt bij mij helemaal niets uit. IE6 en IE7 tonen in beide gevallen niet het uitrolmenu overlappend: het 4e subitem van Number Four is niet te zien.
De oplossing is:

#index-02_ {
    z-index: 2;
    }

Dan komt ie er ook in IE6 en IE7 boven (zowel boven de tekst-tekst-tekst als boven de Google-map, als die omhoog gescrolld is).
Verder zou ik opnemen:

#navbar li li a {
    width: 9em;
    }

in plaats van de over verschillende regels uitgesmeerde <li>'s van de submenus. Dat werkt ook goed in IE6, en maakt de html-code wel zo overzichtelijk.

• Alhier een testpagina: http://developerscorner.nl/csshunter/tests/amplaza_met_nw.htm Zie broncode!

Met vriendelijke groet,
CSShunter

PS: als je op de knop "(+ Reageer op vraag)" klikt, wordt niet de hele voorgaande reactie gekwoot.
PS2: over IE5.5 zou ik me maar niet meer druk maken. Die is al zo lang uit de tijd.

 

[Skipito]

Heel heel heeeeeeeeeeeeeeeeeel erg bedankt voor alle hulp CSSHunter!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!

Echt top!! Dank je wel!!!!!! Het werkt allemaal super nu. :thumb::d