[CSS/FF]lay-out probleempje

[Verwijderd]

het gaat om de volgende lay-out:
http://www.edunk.nl/ics/test.php

In IE ziet de site er precies zo uit zoals ik wil. Echter in FireFoxgeeft ie problemen. Dit komt dat omdat FireFox zich aan de standaard houdt

Het design van de site is als volgt:
Container in het midden met 100% hoogte en als de inhoud van de container groter als 100% wordt dan moet de container groter worden. In principe heel gemakkelijk te realiseren met tables (table align="center" en dan een td met 100% (ofzo), deze worden toch wel uitgerekt), maar ik wil wel eens verder komen met CSS.

Het probleem met FF is dat je altijd een scrolbalk krijgt, hier is een verklaring voor, Mozilla telt de border op bij de 100% terwijl IE het van de 100% afhaalt (niet volgens dé standaard).

Als je de browser verkleint zodat de tekst er niet meer op het scherm past en je dus de scrolbalk nodig hebt om te scrollen, dan houdt de container op. Dit is ook logisch te verklaren. Immers de 100% is het beschikbare beeld. In IE werkt dit wel goed (eigenlijk dus fout).

Mijn vraag is nu eigenlijk. Weten jullie hoe ik deze layout correct kan krijgen (zonder hacks ofzo). Misschien een linkje naar een goede site. Zelf heb ik ook geen idee op welke termen ik moet zoeken.

//Overigens het plaatsen van de content in het midden is geen probleem

thx..

[ Voor 4% gewijzigd door Verwijderd op 09-09-2005 11:53 ]

[Woudloper]

Wat is precies het probleem? Als je je pagina bekijk met ofwel FF ofwel met IE dan ziet de website er gewoon hetzelfde uit. Het enige verschil is dat je bij IE de scrollbars van een kleur hebt voorzien, dat laatste is niet mogelijk in FF...

[MissingDog]

Je kunt dit cheaten door Mozilla zich te laten gedragen als IE, dit is geen fijne oplossing...eerder een CSS hack:

Cascading Stylesheet:

*{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}

[Verwijderd]

nou ja dat is ten minste nog iets

Maar dit is mijn andere probleem:
http://www.edunk.nl/ics/test2.php

Als je scrolt krijg je iets wat ik enigzins wel verwacht maar toch wel raar vindt.

//ik gebruik liever geen overflow: auto omdat die scrolbalk nog steeds niet met de scrollmuis te bedienen is.

[ Voor 23% gewijzigd door Verwijderd op 09-09-2005 12:09 ]

[Verwijderd]

Daarvoor kun je i.p.v. height, min-height gebruiken.

[Verwijderd]

Verwijderd schreef op vrijdag 09 september 2005 @ 12:10:
Daarvoor kun je i.p.v. height, min-height gebruiken.

Dat werkt idd in FF, maar nu werkt ie niet meer in IE of moet ik daar een IE hack voor gebruiken

[Rowanov]

IE kijkt helemaal niet naar min-height omdat hij die property niet ondersteunt. Lijkt me sterk dus.

[Verwijderd]

Rowanov schreef op vrijdag 09 september 2005 @ 12:24:
IE kijkt helemaal niet naar min-height omdat hij die property niet ondersteunt. Lijkt me sterk dus.

In dat geval zou je kunnen proberen om zowel height als min-height in te stellen. Als je dan zorgt dat min-height onderaan staat, zou het moeten werken.

In goede browsers wordt de waarde van height dan overschreven door de min-height, terwijl browsers die min-height niet ondersteunen, zich gewoon vasthouden aan de height waarde.

[Verwijderd]

Rowanov schreef op vrijdag 09 september 2005 @ 12:24:
IE kijkt helemaal niet naar min-height omdat hij die property niet ondersteunt. Lijkt me sterk dus.

Dat begrijp ik, maar als ik height: 100%; en min-height: 100% laat staan dan gaat het nog steeds fout in FF

Werken met CSS en sematiek is zo klere frustrerend

//helaas Postzegel, dat werkt niet

[ Voor 13% gewijzigd door Verwijderd op 09-09-2005 12:30 ]