[CSS]positionering conflict tussen div en afbeeldingen in IE

[Verwijderd]

Ik heb last van een soort bug in IE waardoor mijn pagina niet altijd goed opgebouwd wordt. In Firefox komt dit probleem niet voor. De bug is dat in pagina's waar afbeeldingen tussen de tekst staan, de footer soms op de verkeerde plaats terecht komt. Dit gebeurt alleen de eerste keer dat je de pagina laadt, als IE de afbeeldingen in de cache heeft, klopt alles wel. Het is erg lastig testen omdat het probleem zich zo nu en dan voor doet, en zelfs als je de cache leegt, komt het vaak niet meer terug.

Het lijkt erop dat IE eerst de pagina opbouwt en vervolgens nog de afbeeldingen erin zet (duurt soms ff voordat ze gedownload zijn) Vervolgens wordt de opmaak niet meer aangepast aan de nieuw ingevoegde afbeeldingen zodat de footer te hoog komt, soms half over een plaatje heen. De achtergrond steekt dan ook onder de footer uit. Als het probleem zich voordoet en je drukt op F5 of Ctrl-F5, dan is de volgende opbouw ALTIJD goed.

Ik heb al een aantal dingen geprobeerd zoals het aanpassen van de eigenschappen van een aantal div's, zoals display: block; in de content-div en clear:both; voor de footer, het helpt echter niets.

Hier een voorbeeld van een pagina waarbij het regelmatig fout gaat:http://www.thaisverkeersb...en/geografie_thailand.asp

Als je de 'foute' opbouw ziet, druk dan eens F5 en je zult zien dat alles 'normaal' zal worden opgebouwd.

Is er iemand bekend met dit verschijnsel en is hier een oplossing voor??

[Sappie]

Voordat ik verder naar je probleem kijk, zou je er goed aan doen je pagina eerst eens valide te maken. Zonder valide pagina is het gedrag sowieso niet echt voorspelbaar:

http://validator.w3.org/c...%2Fgeografie_thailand.asp

[Verwijderd]

Ik heb maar even een testpagina opgesteld die *valideert* Niet helemaal dus, maar de laatste 3 errors zijn van 1 regel javascript waar HTML in voorkomt. Ik vraag me dus zelfs af of het geen "false positive" is.

De opmaak daarentegen valideert nu dus wel (er zaten zo'n 70 fouten in), helaas blijft het probleem zich voordoen.

Hier een nieuw linkje: http://www.thaisverkeersbureau.nl/testpagina.html

De grap is dat de fout zich niet altijd voordoet, dus als ie in 1x goed laadt, dan betekent dat nog niet dat de bug weg is.


edit: Verkeerde link geplaatst

[ Voor 11% gewijzigd door Verwijderd op 25-04-2006 16:01 ]

[Sappie]

Ik heb niet zozeer een oplossing voor je probleem helaas en krijg het hier lokaal ook niet gereproduceerd. Waarschijnlijk heeft het te maken met het gegeven? dat IE de afmetingen van de image(s) nog niet 'weet' en toch reeds de boel gaat renderen, waardoor de footer dus te hoog komt. Wellicht is dit dus op te lossen door voor een image de afmetingen op te geven in je css.

Verder zou ik je wat tips willen geven om je pagina eenvoudiger op te zetten.

- ten eerste zijn spacer gifs uiteraard nergens meer voor nodig. Er bestaan namelijk genoeg css property's (margin, padding, top, left, etc) die je zelf ook al gebruikt, om het gebruik van spacer gifs overbodig te maken.

- Verder gebruik je echt een overvloed aan div's; het kan allemaal een stuk eenvoudiger:

Ten eerste de manier waarop je het geheel centreert. Beter gebruik je een container (die dus je hele pagina 'containt') die je vervolgens centreert (mbv margin: 0 auto). Of je centreert de body (die uiteraard alles al 'containt') op deze manier (gebruik ik vaak vanwege het feit dat dit weer wat markup scheelt en het feit dat de body in sommige gevallen anders (fijner) reageert mbt layouten tov een normale container div).

Ten tweede gebruik je veel div's om allemaal stukjes achtergrond weer te geven. Aangezien je pagina geen variabele breedte heeft kun je de achtergrond net zo eenvoudig onderverdelen in een drietal zaken; namelijk de header achtergrond, de verticaal repeatende container (/body) achtergrond, en een achtergrond voor je footer. Uiteraard is dit wat kort door de bocht, maar je zou in ieder geval op een hoop div's kunnen besparen die slechts dienen tot het weergeven van een achtergrondplaatje. Deze achtergrondplaatjes (en daarmee de bijbehorende div's) horen bovendien niet in de markup thuis.

- Verder zou ik ipv

HTML:

<div class="HomeKop1">Thaisverkeersbureau.nl</div>

uiteraard gewoon een header element gebruiken (h1 in dit geval) die je naar wens kan aanpassen mbv css.

- Voor wat betreft de plaatjes zoals je die in een van je menu's gebruikt:

HTML:

<li><a href="../index.asp">[img]"../Media/Gedeeld/home.gif"[/img]<span class="rood">Home</span></a></li>

Deze plaatjes zou ik gewoon opnemen als achtergrond van de anchor mbv css. Met het toepassen van wat padding op de anchor plaats je vervolgens je tekst goed.

- Als laatste zou ik de plaatjes die je nu opneemt in je headings (h2) gewoon onder de heading neerzetten.

[ Voor 12% gewijzigd door Sappie op 26-04-2006 08:29 ]

[Verwijderd]

de afmetingen meegeven aan de afbeelding is idd. een goeie tip, nog niet aan gedacht. Tnx ook voor de andere tips mbt. de opmaak.

Ik kan trouwens geen redenen geven over waarom het design nu zo in elkaar zit, mijn collega heeft het in elkaar gezet en die is nu op vakantie Wellicht dat er een bepaalde reden achter zit om het op deze manier te doen, ik weet in ieder geval dat ie er erg lang op heeft zitten zweten om alle elementen op dezelfde manier gepositioneerd te krijgen in IE én in Firefox.
Dit is het eerste design van ons dat volledig met CSS in elkaar zit, dus het was ook ff "uitproberen". Vooral de workarounds voor de bugs in de CSS-implementatie van IE moet je in de vingers krijgen.

Ik zal in ieder geval eens kijken wat er gebeurt als ik de afmetingen ga specificeren.

[Verwijderd]

Ok, de oplossing lijkt goed te werken, ik heb het op meerdere pc's uitgeprobeerd maar heb de 'bug' niet meer tevoorschijn zien komen.

Tnx!