[CSS?] Mozilla maakt zooitje van w3c valid site

[Hertog_Martin]

Ik ben sinds een week begonnen met een site.
Deze is w3c html 4.0 valid en w3c CSS valid

Het gaat dus om deze site: http://members1.chello.nl/~l.goedhart1/website/
Nu is het probleem dat Mozilla een zooitje van de layout maakt.

Nu keek ik in de FAQ van mozilla: http://www.mozilla.org/docs/web-developer/faq.html

En daar staat dat mozilla gebruikt van verschillende layout modussen.
1 daarvan is standard en dan moet ie dus gewoon volgens de w3c standards werken.

Nu had ik dus uit die FAQ de Doctype overgenomen voor de standard layout maar als ik dat doe dan maakt internet explorer er weer een zooitje van. En heb ook Almost-standard geprobeerd maar daar hetzelfde.

Rest van de FAQ doorgekeken en kwam niets tegen wat zou kunnen helpen.

Zoals je ziet heb ik dus genoeg al zelf geprobeert.
Ik vraag dus of de mensen hier misschien nog iets weten waardoor mijn site in alle browsers werkt (het liefst zonder dat ik duizend dingen moet veranderen). Zoals ik al zei is de site w3c html4 en css valid dus daar ligt het probleem niet.

alvast bedankt

[ Voor 7% gewijzigd door Hertog_Martin op 31-12-2003 00:53 ]

[crisp]

zoek eens op box-model

[creative8500]

Stuur altijd even een link van de betreffende pagina.

[Hertog_Martin]

creative8500 schreef op 31 december 2003 @ 00:37:
Stuur altijd even een link van de betreffende pagina.

oeps staat er bij

[Creesch]

nou weetje ... mozilla maakt er geen zooitje van maar IE

ookal is de pagina volgens de standaard ... IE maakt er door gebrekkige css2 ondersteuning toch iets anders van.

Borders worden in IE niet meegerekent in de breedte en hoogte van een DIV terwijl dat wel moet eigenlijk
Mozilla doet dat wel en daardoor staat alles in mozilla iets naar rechts op jouw pagina.

Tenminste dat is wat ik ervanehb begrepen toen ik hetzelfde probleem ooit had

[Hertog_Martin]

Heb gezocht op box model en snap nu de verschillen en dat mozilla het dus correct doet.

Alleen snap nou nog niet echt hoe ik dit simpel op kan lossen

moet ik gewoon 1 regel ergens toevoegen of moet ik de hele code overal aanpassen?

[Verwijderd]

Als je dit toevoegt aan je stylesheet, dan lijkt het al een stuk beter:
div{
-moz-box-sizing:padding-box;
}

Je gebruikt erg veel floats. Houd er rekening mee dat floats niet meer meedoen in de gewone flow van de box waar ze in zitten en dus die box ook niet kunnen oprekken (behalve dan in IE misschien).
Als je er dan ook position:relative; top:30px etc eroverheen gooit, dan krijg je het soort problemen dat containing blocks niet opgerekt lijken te worden door de blokken erin.

Ik denk dat je de css anders moet proberen. Waarschijnlijk simpeler is om een dikke padding-left en padding-right te gebruiken voor de containing div en daar die linker en rechter-kolommen in te stoppen mbv position:absolute; en left en right properties en zo. De containing div moet dan dus position:relative hebben.
De middelste kun je dan gewoon laten bungelen.
Voor die twee mini kolommetjes moet je nog wel float gebruiken, geloof ik.

Je zou ook gewoon een tabel kunnen gebruiken voor de layout. Is ook html valid.

[Hertog_Martin]

Thnx,

heb het toegevoegd bij de index pagina. Kan iemand met mozilla me vertellen of het nu beter is?

[Harm]

Hertog_Martin schreef op 31 december 2003 @ 02:13:
Thnx,

heb het toegevoegd bij de index pagina. Kan iemand met mozilla me vertellen of het nu beter is?

Het is wel beter dan het was, maar nog steeds niet perfect. De hoogte van je div's worden nu niet goed weergegeven. Maar kijk zelf maar:

[ Voor 5% gewijzigd door Harm op 31-12-2003 02:19 . Reden: BTW ]

[disjfa]

enige wat je moet doen is geen width opgevenenals je dat wel doet een clear:both toegeven aan een een style onder de laaste styles.

verder het beste.... geen height je hebt inhoud genoeg

verder please geen caps in je styles

[ Voor 10% gewijzigd door disjfa op 31-12-2003 02:26 ]

[Hertog_Martin]

Harm schreef op 31 december 2003 @ 02:17:
[...]

Het is wel beter dan het was, maar nog steeds niet perfect. De hoogte van je div's worden nu niet goed weergegeven. Maar kijk zelf maar:

<div style="text-align: center;">[afbeelding]</div>

Ah komt er dus eigenlijk op neer dat de div's niet worden meegerekt.. thnx voor de screenshot.. wou ik al om gaan vragen


In IE rekken die witte div's mee met de content. Ik los dit denk ik gewoon op door voor elke pagina gewoon de css aan te passen zodat het vanzelf al klopt zonder uitrekken

Verder nog wat kleine dingetjes die niet kloppen. Maar dat neem ik echt maar op de koop toe. Ik ben iig al blij dat het er gewoon redelijk uitziet voor mozilla gebruikers en niet dat de ene tabel ergens linksonder staat en de ander rechtsboven terwijl ze beiden in het midden moeten.


Kan je Mozilla trouwens gewoon los van IE installeren? dus dat je alles gewoon op IE standaard houd en geen conflicten krijgt en dat je gewoon af en toe mozilla ff kan opstarten om je site te checken

[ Voor 17% gewijzigd door Hertog_Martin op 31-12-2003 02:42 ]

[Harm]

Hertog_Martin schreef op 31 december 2003 @ 02:29:
Kan je Mozilla trouwens gewoon los van IE installeren? dus dat je alles gewoon op IE standaard houd en geen conflicten krijgt en dat je gewoon af en toe mozilla ff kan opstarten om je site te checken

Ja hoor, dat is geen enkel probleem. Dat is juist het handige . Als je wil kan je Mozilla/Firebird gewoon je standaard browser laten zijn en voor IE-only sites even IE opstarten. Dat is in ieder geval de manier waarop ik werk .

[Hertog_Martin]

ok prima dan installeer ik dat zo ff. Kan ik zelf checken of mn site er nog voldoende uitziet in mozilla

[Johnny]

Hertog_Martin schreef op 31 december 2003 @ 02:29:
Kan je Mozilla trouwens gewoon los van IE installeren? dus dat je alles gewoon op IE standaard houd en geen conflicten krijgt en dat je gewoon af en toe mozilla ff kan opstarten om je site te checken

Dat is met alle normale programma's zo.

Je kan ook FireBird of K-Meleon doanloaden, gebuiken dezelfde Gecko engine, maar zijn stukken kleiner omdat ze geen ingebouwde mail client, adresboek HTML editor en IRC client hebben.

[Joove]

Harm schreef op 31 december 2003 @ 02:17:
[...]

Het is wel beter dan het was, maar nog steeds niet perfect. De hoogte van je div's worden nu niet goed weergegeven. Maar kijk zelf maar:

<div style="text-align: center;">[afbeelding]</div>

Dit heb ik zelf ook een keertje gehad heeft te maken met de float van je div's.
Zie http://gathering.tweakers.net/forum/list_message/19004932

[Hertog_Martin]

Joove schreef op 01 januari 2004 @ 14:48:
[...]


Dit heb ik zelf ook een keertje gehad heeft te maken met de float van je div's.
Zie http://gathering.tweakers.net/forum/list_message/19004932

Als ik de floats weghaal dan komt alles onder elkaar

dus hoe kan ik zonder floats bepalen waar welke box moet komen?