[CSS] GMap e.a. Divs zweven absolute in IE

[CU2morO]

De laatste tijd ben ik wat aan het spelen met Google Maps en ben inmiddels aanbeland bij wat complexere structuren met betrekking tot layouts en CSS dat het volgende probleem optreed in IE7

GoogleMaps wordt getekent in een DIV met een vaste width / height in de CSS stylesheet. Deze div bevind zich in een form die via AJAX wordt gegenereerd. Omdat het op de bodem van de pagina is, breidt de pagina naar onder uit wanneer deze geladen wordt. Hierdoor laadt de GMap buiten het zichtbare veld. Wanneer ik nu naar onder scroll zie ik een lege DIV met de juiste afmeting. Wanneer ik echter nu de AJAX call opnieuw doe en de form opnieuw laad, dit keer met de GMap in mijn gezichtsveld wordt hij wel op de juiste plaats getekent.

Het probleem nu echter is wanneer ik scroll, de hele pagina doet wat ie moet doen, maar mijn DIV met google maps er in blijft op exact dezelfde plaats IN MIJN BROWSER, en de pagina scrolled er dus onderlangs. In FireFox is er niets aan de hand, echter in IE7 treed dit probleem op.

Het gebeurd met verschillende DIVjes op mijn pagina, ook zonder GoogleMaps er in. ik ga er daarom ook van uit dat het een CSS stylesheet probleem is van de eigen DIV of de parent DIV. Echter heb ik zo'n beetje iedere CSS property al geprobeerd in iedere mogelijke combinatie maar ik krijg het niet opgelost.

[TeeDee]

En nu? Zo zonder html, css, evt js. wordt het (in ieder geval voor mij) lastig.

[MueR]

De glazen bol is stuk, al een tijdje eigenlijk. Geef eens een linkje weg ofzo?

[CU2morO]

Je HOEFT niet te reageren hoor. Het is lastig om het te demonstreren aangezien ik momenteel niet over een host beschik en de volledige structuur lastig uit de huidige applicatie te halen is om dat gedeelte online te gooien.

Ik hoopte op een paar tweakers met een goed inzicht die dit probleem bekend in de oren klonk en eerder met dit bijltje gehakt hebben. Bovenstaande 2 posters horen hier duidelijk niet bij, even goeie vrienden, maar met je misplaatste cynisme help je niemand.

[Bosmonster]

Dat is geen cynisme, maar realiteit. Om je te kunnen helpen moeten we het probleem kunnen constateren. Dit lukt niet zonder een voorbeeld.

[MueR]

Ik denk dat de vaste Devschuur lurkers toch redelijk inzicht hebben in dit soort dingen, alleen kunnen wij met alle goede wil van de wereld dit niet oplossen. Je laat een boek zien en vraagt vervolgens of we je uit het blote hoofd de spelfouten er uit willen noemen.

[Borizz]

Ik ben het probleem dat je beschrijft ook al eens tegengekomen in IE7. Bij mij was het zo dat bij het dynamisch vullen van select elementen de google map opeens onzichtbaar leek. Maar het div element blijkt echter op een andere plaats in het document te staan (onzichtbaar). De oorzaak is mij nog onbekend, op het begin had ik het als volgt opgelost:

Na het toevoegen van elementen roep ik de volgende functie aan:

JavaScript:

function redraw(elId) {
    var el = document.getElementById(elId);
    if (el) {
        el.className = el.className;
    }
}

// zo aanroepen dus
redraw('map');

De code slaat echt nergens op, maar de map werd wel zichtbaar.

Naderhand heb ik het nog voor elkaar gekregen om om de bug heen te werken door middel van de juiste CSS properties, maar die oplossing heb ik helaas niet gedocumenteerd en ik ben ook alweer vergeten wat het precies was. Volgens mij had het ermee te maken dat het parent element van de google map layout moest hebben. En volgens mij was position: relative ook nodig maar dat weet ik niet zeker meer.

Zoiets dus:

HTML:

<style type="text/css">
  #mapParent {
    width: 100%;
    position: relative;
  }
</style>
<div id="mapParent">
  <div id="map"></div>
</div>

[XangadiX]

nou, nou; het is vrij gebruikelijk om te laten zien wat het probleem is, maar dat is soms lastig. Als je echt nergens wat kwijt kunt (er zijn toch best wel wat simpele gratis webhost, en vaak geeft je provider je ook wel een mb of 20) kun je het allicht als rar bestandje ergens op een gratis upload site zetten. Ik snap dat je hoopt dat iemand het al voor je opgelost heeft; maar nu ontneem je jezelf de mogelijkheid dat iemand even een blik op de code werpt en zegt: "oooow, maar je moet dit even anders doen". Het is gewoon makkelijker als we wat kunnen zien. En de slagingskans is groter