Ik heb nergens het antwoord kunnen vinden dus probeer ik het hier maar eens.

Ik heb het probleem even neergezet in een hele eenvoudige html op http://www.wohs.nl/test.php

In Firefox en Safari is de onderste regel zichtbaar zoals het hoort volgens mij.

In IE echter moet daarvoor gescrolld worden waarvoor mijns inziens geen enkele noodzaak is.

Weet iemand waarom?

Los van dat ik vermoed dat dit draadje snel op slot is omdat het weinig met ondernemen te maken heeft...

 

Het verschil is werking tussen de browsers kon wel eens met je DOCTYPE (http://www.w3schools.com/tags/tag_doctype.asp) te maken hebben. Zelf prefereer ik "XHTML 1.0 Strict" omdat die voor mij meestal de beste cross-browser weergave oplevert.

Je specificeert 'height' als 100% alleen is de definitie van waar je 100% van krijgt niet eenduidig. Even googlen op MSIE 100% viewport en je wordt een stuk wijzer ;)

In IE8 staat de regel ook in het scherm, welke versie van IE gebruik je? Bespaar je de moeite voor optimaliseren van websites voor oudere versies van IE, Microsoft heeft beloofd W3C compliant te worden vanaf versie 9.

 

Gebruik liever

voor opmaak van een site, tabellen zijn voor ordenen data op een webpagina.

Geweldig nieuws.

Ik werk in Firefox en gebruik versie 7 van windows omdat ik graag wil dat daar ook alles werkt.

Ik gebruik tabellen omdat ik mijn klanten cms aanbied m.b.v. tinymce.

Hmmm, IE8 geinstalleerd maar die scrollt ook.

IE 9 geinstalleerd. De hele browser liep gelijk vast.

Terug dus naar IE8

Regel 32, daar zet je een row op 100%. Terwijl in de row erboven en eronder ook hoogte nodig is. Ik denk dat dat de oorzaak is.

Pas na een refresh zie ik het probleem binnen IE8.

 

Tinymce staat los van het gebruik van tabellen. Je kan toestaan dat klanten tabellen kunnen maken met Tinymce, bedoel je dat?

de regel erboven is ook 100%.

maar als dat het probleem was zou er iets kleiner en niet groter moeten worden toch?

Gedrag van IE is apart. Alle rows moeten een hoogte hebben, bv:               

 In IE moet gescrolld worden voor de onderste regel

In Firefox en Safari niet

Waarom?

                                                     Deze regel hoort in het scherm te staan 

Even geprobeerd maar het maakt geen verschil.

Lijk me ook niet logisch.

Logisch is het als je iets niet groot genoeg krijgt maar iets extra hoogte geven omdat iets te groot is???

Het gedrag van Firefox is eigenlijk vreemd. Op w3c staat dit:

 

  Quote

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

 

Met andere woorden: de hoogte van het body element bepaalt de hoogte van de middelste cel. De body op zijn beurt krijgt door de height: 100% de hoogte van de viewpoort. De cel zou dus net zo hoog moeten zijn als de viewport (wat ook klopt, de footer tekst staat precies de hoogte van de koptekst buiten het scherm en dat blijft zo ook als je je venstergrootte verandert)

 

Ik zou ikkrijg z'n manier proberen. Of een vaste hoogte voor de header & footer. Google op 'footer at bottom of page' of 'css page fill viewport' levert vele alternatieven. Is namelijk erg basic ;)

Bij IE is niets logisch >:(

 

Maar inderdaad, vermijd tabel opmaak, werk met div's en zoek de Sticky Footer die het best werkt bij je ontwerp.

Om de zondag af te sluiten: middelste stuk (met td class="height100") vervangen door dit en het werkt in IE8 en Firefox 3.6.x:

 

 

 

 

 

Feitelijk ikkrijg z'n oplossing dus.

Yep het werkt.

Te gek.

Bedankt.