[XHTML] Table height 100%, niet standaard verhaal

[pierre-oord]

He allemaal

Komt er weer eentje: Voor een layout wil ik dat deze verticaal schermvullend word. Deze layout moet XHTML compatible zijn, zodat de menu's juist functioneren. Automatisch kan ik zo de height=100% niet meer gebruiken.

De CSS oplossing heb ik geprobeerd, dit werkt half. IE en FF laten de pagina verschillend zien (FF inmiddels goed, maar IE nog niet) maar de table in de table, wil niet goed meerekken. Het weglaten van de table zie ik niet zitten omdat deze meerdere TD's heeft, en dan wil je hele layout vaak scheef worden (ondanks correct gebruik van colspans).

Ooit heb ik eens een site uit layers in elkaar gezet, ik ben vergeten waarom maar die had ik snel weer omgebouwd naar het table-model, vermoedelijk had het met compatibiliteit te maken.

Weet iemand misschien een goede oplossing voor m'n site? Ik doe ook beter m'n best alles in CSS te doen, iig volgens de validator is dat aardig gelukt. Alleen moet het er nu ook goed goed uitzien!

De site staat hier:
http://nieuw.flexbouncer.com/
CSS: http://nieuw.flexbouncer.com/style.css

IE6 nog niet getest. Ik hoop stiekem dat dit een klein probleempje is van IE7.

edit:
Voor de duidelijkheid: Het zwart dat je ziet, had wit moeten zijn, doordat de middelste table zichzelf zou moeten oprekken.

edit2:
p.s. ja hij is ietje bleek die site, misschien een donker achtergrondje.. mja..

[ Voor 21% gewijzigd door pierre-oord op 15-07-2007 03:06 ]

[Fuzzillogic]

Doe jezelf een groot plezier, en dump de tabellen. XHTML gebruiken om hip en modern te zijn en vervolgens met tabellen gaan klooien, sorry, maar dat slaat als een tang op een varken. Verder gebruik je wel netjes <ul>'s voor het menu, maar verderop staat er ook nog <font>

Er zijn genoeg voorbeelden van 100% height sites. Ook hier op GoT is het vaak genoeg ter sprake gekomen. Zoek ook eens op 'footer' en 'faux columns'.

[pierre-oord]

Fuzzillogic schreef op zondag 15 juli 2007 @ 03:22:
Doe jezelf een groot plezier, en dump de tabellen. XHTML gebruiken om hip en modern te zijn en vervolgens met tabellen gaan klooien, sorry, maar dat slaat als een tang op een varken. Verder gebruik je wel netjes <ul>'s voor het menu, maar verderop staat er ook nog <font>

Er zijn genoeg voorbeelden van 100% height sites. Ook hier op GoT is het vaak genoeg ter sprake gekomen. Zoek ook eens op 'footer' en 'faux columns'.

Ik had ook een hoop gevonden op GoT, alleen ben ik van mening dat ik het op de juiste manier aanpak (FF doet het) alleen IE7 wil niet meewerken. Op IE6 moet ik het nog testen, ik heb even geen systeem beschikbaar met dat erop hier.

En het klopt van de fonts hier en daar, ik zal dat ook gaan verplaatsen naar het CSS, maar voor die kleine dingen vind ik font en strong nog wel makkelijker eigenlijk...

[Fuzzillogic]

Bij MS kun je gratis VM's downloaden met kant-en-klaar WinXP & IE6/IE7. Bovendien kun je IE6 en IE7 ook wel stand-alone installeren.

[Verwijderd]

Check deze site, daar staat een beschrijving over standalone versies.

[pierre-oord]

Oke interessant, maar heeft iemand nog een oplossing voor het probleem dat de middelste table niet oprekt in IE7 en wel in FF?

[g4wx3]

Om met height= 100% te werken moet je ie in quicrks duwen, dmv van een comment voor het doctype
Ook moet je alle bovenliggen elenmenten op 100% zetten (HTML, BODY,...)
Een andere oplossing is om alle browsers in quircks te duwen, en dus niet valid te zijn, maar het heeft wel voordelen.
Echter, als je een meer bijzondere intraface wil maken, doe je best gewoon alles met javascript.

(zie hier hoe ik het heb gedaan, maar site is nog niet af)

[ Voor 10% gewijzigd door g4wx3 op 15-07-2007 17:16 ]

[pierre-oord]

g4wx3 schreef op zondag 15 juli 2007 @ 17:15:
Om met height= 100% te werken moet je ie in quicrks duwen, dmv van een comment voor het doctype
Ook moet je alle bovenliggen elenmenten op 100% zetten (HTML, BODY,...)
Een andere oplossing is om alle browsers in quircks te duwen, en dus niet valid te zijn, maar het heeft wel voordelen.
Echter, als je een meer bijzondere intraface wil maken, doe je best gewoon alles met javascript.

(zie hier hoe ik het heb gedaan, maar site is nog niet af)

In die modus werkt mijn menu dus niet meer, dus ik kan niet in quircks mode. En javascript wil ik eigenlijk niet gebruiken, zeker niet als het alleen voor 1 tabel is die WEL werkt in FF en niet in IE7.

edit: Zie ook dit bijvoorbeeld: http://www.thescripts.com/forum/thread568264.html

edit:

Ik heb zelfs even wat met layers geprobeerd, en die werken nog minder mee dan een table: Ik krijg met geen mogelijkheid een div met breedte 1004 gecentreerd in het scherm. Hij komt of tegen de linkerrand, of vanaf het midden en dan 1004 pixels naar rechts;
voorbeeld: http://nieuw.flexbouncer.com/test2.html

Ik heb voor een deel gewoon wat copy-paste google werk gedaan, maar in IE7 krijg ik zelfs een div niet gecentreerd. Ik hoop dat die tabel even werkend word.

edit2:
Ik wil het dus best met div's proberen, maar ik heb na een dag, nog geen oplossing gevonden voor een gecentreerde div die niet van width wijzigt.

[ Voor 31% gewijzigd door pierre-oord op 15-07-2007 20:35 ]

[pierre-oord]

Nou, ik geef niet op:
Op http://nieuw.flexbouncer.com/index2.php staat een nieuwe versie, nu met DIV's. En wat gebeurd er nu: in IE7 werkt het menu niet meer.

Ook moet ik nog gaan uitvinden hoe ik met DIV's ervoor zorg dat de middelste div (met de content) automatisch uitrekt zodat het gehele scherm is gevuld, en de footer onderaan komt te staan. En bij overflow gewoon groter worden. Dit google ik wel bij elkaar, maar het probleem met het menu word denk ik vrij lastig.

Sowieso omdat ik een class gebruik voor IE6 en 7 voor het ondersteunen van een aantal eigenschappen die IE7 nog niet onder de knie heeft. Het gaat om deze class: http://www.xs4all.nl/~peterned/csshover.html

Morgen even eea uitspitten, maar ik maak me ernstig zorgen. En IE slinger ik ook gelijk de deur uit. Stop een paar moeilijke dingen erin en het werkt direct niet meer, terwijl dat Firefox alles prima laat zien: table of div's, het werkt, en in IE6/7 niet

[Cadezo]

pierre-oord schreef op maandag 16 juli 2007 @ 02:09:
[....]En wat gebeurd er nu: in IE7 werkt het menu niet meer.

Misschien is dit een nuttige link voor je: Naar Voren: De kracht van hover...