Paginaopbouw fout in Internet Explorer - Softwareontwikkeling

dinsdag 22 augustus 2006 20:12

Acties:

The Future Awaits

Topicstarter

Ik wil op mijn website een kalender toevoegen. Data wordt opgehaald met behulp van javascript en xml.

Het werkt allemaal prima met Opera en Firefox, maar internet explorer laat het deel van de content onder de kalender-tabel verdwijnen zodra kalender-data geladen is.

De tabel van de kalender wordt met behulp van DOM object opgebouwd, als de pagina geladen is.

Pagina ziet er in het kort zo uit:

code:

<html>
   <body>
      <linker kolom>
      </linker kolom>
      <rechter kolom>
         Hierin bevindt zich de tabel met de kalender
      </rechter kolom>
   </body>
</html>

De UpdateCalendar functie voegt voor iedere week een <tr> aan de kalendertabel toe, en een <td> voor iedere dag.

Het probleem is te zien op http://jankamper.nl/. Bekijk de pagina in IE en een vergelijk dat met een andere browser.

Heb al geprobeerd ipv met de createElement-methode de tabel te schrijven door de calendarBox met innerHTML te vullen. Geeft hetzelfde resultaat. Alles onder de tabel verdwijnt.

Wie heeft er een suggestie voor de mogelijke oplossing van dit probleem?

dinsdag 22 augustus 2006 20:15

Acties:

Verwijderd

Het enige verschil wat ik zie is dat in IE de content onder de header komt en in FF scrolt de header mee omhoog.
Voor de rest geen layout vern**king bij de kalender oid hoor ?

dinsdag 22 augustus 2006 20:26

Acties:

JJr

The Future Awaits

Topicstarter

Dat dat een verschil is ben ik van op de hoogte, maar dat is niet het probleem waar ik op doel.

Hier 2 screenshots naast elkaar om het probleem te illustreren.
Afbeeldingslocatie: http://home.quicknet.nl/qn/prive/jm.kamper/voorbeelderror.jpg

Afbeeldingslocatie: http://home.quicknet.nl/qn/prive/jm.kamper/voorbeelderror.jpg

Links is IE, rechts is Firefox. De content in de linker-kolom is in IE onder de kalender verdwenen. Terwijl hij in Firefox gewoon is blijven staan.

dinsdag 22 augustus 2006 21:29

Acties:

gertvdijk

Je 'cleared' je floats dus niet goed. Je div.narrowColumnLeft is links gefloat en moet goed worden gecleared! In je css zie ik wel #footer clear:both;, maar in je HTML zie ik geen footer!

code:

<html>
   <body>
      <linker kolom style="float:left; width: 70%;">
      </linker kolom>
      <rechter kolom style="float:left; width: 25%;">
         Hierin bevindt zich de tabel met de kalender
      </rechter kolom>
      <footer style="clear:both;"> <-- ontbreekt dus
         Footer text
      </footer>
   </body>
</html>

[ Voor 48% gewijzigd door gertvdijk op 22-08-2006 21:31 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

dinsdag 22 augustus 2006 21:44

Acties:

JJr

The Future Awaits

Topicstarter

Footer had ik eerder weggehaald omdat ik dacht dat die misschien het probleem opleverde. Nu is hij weer teruggeplaatst. Maakt zover ik kan zien geen verschil.

/Edit
Ik heb de footer in de css even een rode border gegeven. Hij is niet te zien als de pagina laad, maar als ik de het venster resize komt deze te voorschijn. Precies onder de rechter kolom.
De clear:both van de footer lijkt dus geen rekening meer te houden met de floatende linker kolom.

Footer helemaal weghalen, zowel uit html als css, verhelpt het probleem ook niet.

[ Voor 56% gewijzigd door JJr op 22-08-2006 22:05 ]

dinsdag 22 augustus 2006 22:23

Acties:

gertvdijk

Ok, je begrijpt iets fundamenteels over floaten en clearen niet.
Je gefloate elementen zitten in div#page. Dus:

div#page -> div.narrowColumnLeft
div#page -> div.sideBarRight

Vervolgens wil je dus de inhoud van div#page goed laten clearen. Dat doe je dus door binnen de div#page een element te zetten dat het cleared.

code:

<html>
   <body>
   <div id="page">
      <linker kolom style="float:left; width: 70%;">
      </linker kolom>
      <rechter kolom style="float:left; width: 25%;">
         Hierin bevindt zich de tabel met de kalender
      </rechter kolom>
      <footer style="clear:both;"> <-- binnen #page
         Footer text
      </footer>
   </div>
   </body>
</html>

En dus niet:

code:

<html>
   <body>
   <div id="page">
      <linker kolom style="float:left; width: 70%;">
      </linker kolom>
      <rechter kolom style="float:left; width: 25%;">
         Hierin bevindt zich de tabel met de kalender
      </rechter kolom>
   </div>
   <footer style="clear:both;"> <-- buiten #page
         Footer text
   </footer>
   </body>
</html>

P.s. Eigenlijk zou FF hetzelfde moeten doen als IE vind ik

[ Voor 4% gewijzigd door gertvdijk op 22-08-2006 22:25 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

dinsdag 22 augustus 2006 23:58

Acties:

JJr

The Future Awaits

Topicstarter

Ok, je hebt helemaal gelijk.

Een div toevoegen binnen de page, met als style clear:both; heeft het probleem opgelost. $_/-\o_$

woensdag 23 augustus 2006 00:05

Acties:

gertvdijk

JanJr schreef op dinsdag 22 augustus 2006 @ 23:58:
Ok, je hebt helemaal gelijk.

Een div toevoegen binnen de page, met als style clear:both; heeft het probleem opgelost. $_/-\o_$

Graag gedaan. Ik heb ook dingen geleerd van jouw manier van PNG transparantie

btw.. Zie ook http://www.positioniseverything.net/easyclearing.html

[ Voor 10% gewijzigd door gertvdijk op 23-08-2006 00:06 ]

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog