[HTML/CSS] Div's staan goed in IE, niet in Fx en Opera

[Alex)]

Hoi,
Voor de schoolwebsite die ik beheer ben ik een nieuwe layout aan het maken voor forumberichten, dat lukt vrij aardig.
Ik heb echter een heel raar probleem, in IE zie je niks vreemds, maar zowel Firefox (1.5.0.1) als Opera (8.51) laten de <div>'s waar citaten in staan, niet goed zien.
De tekst uit de quotes komt over de andere tekst heen te staan, het lijkt alsof er geen rekening wordt gehouden met de afstanden etc.

Dit is de pagina:
http://www.gymnasiumbreda.nl/admin/bekijktopic2.html

Een gestripte versie:
http://www.gymnasiumbreda.nl/admin/bekijktopic2a.html

Gestripte versie die het probleem duidelijker uitlegt:
http://www.gymnasiumbreda.nl/admin/bekijktopic2b.html

De CSS staat hier:
http://www.gymnasiumbreda...e/athene.php?viewcss=true

Zowel de HTML als de CSS is correct volgens het W3, maar toch tonen Fx en Opera niet wat IE (met z'n verouderde CSS-support) wel kan tonen.
Ik heb al geprobeerd mijn CSS te wijzigen, de divs en p's anders in te delen, maar niets hielp.
Zou iemand van jullie mij kunnen helpen?

[ Voor 14% gewijzigd door Alex) op 19-02-2006 21:44 . Reden: Gestripte versie toegevoegd ]

[RobIII]

Het is al veel vaker gezegd, maar here goes: Dat je HTML en CSS valideren wil absoluut niet zeggen dat het ook "doet wat je wil". Waar komt dat idee toch vandaan?

Wat heb je al geprobeerd? En hoe heb je het geprobeerd anders in te delen? Heb je een test-case? Of mogen wij die lap HTML en CSS gaan debuggen voor je?

[ Voor 11% gewijzigd door RobIII op 16-02-2006 21:36 ]

[Alex)]

Wat ik wil is dit:


Firefox en Opera geven me dit:


Ik heb geprobeerd om <p>'s buiten <div>'s te zetten, en andersom. Verder heb ik nog met de padding en margin geëxperimenteerd, maar dat werkte ook niet. Noch het switchen van <blockquote> naar <div> voor de quotes.

Verder weet ik niet wat ik kan proberen, ja... tables gaan gebruiken, maar dat wil ik nou net niet.

Ik verwacht niet dat jullie alles gaan debuggen, maar een steuntje in de rug zou handig zijn

[JHS]

Wat RobIII volgens mij ook bedoelde was dat het voor ons fijn zou zijn als we alleen de *relevante* code te zien zouden krijgen. Dus alleen de html en de css die met de post / quote te maken heeft . Oftewel een testcase-achtig bestand.

[Alex)]

O zo, ik heb de pagina even gestript.
Zie: http://www.gymnasiumbreda.nl/admin/bekijktopic2a.html

[RobIII]

Alex schreef op donderdag 16 februari 2006 @ 21:47:
O zo, ik heb de pagina even gestript.
Zie: http://www.gymnasiumbreda.nl/admin/bekijktopic2a.html

Dat is niet gestript.... Gestript is alleen de *relevante* code, dus een paar regels HTML welke het probleem demonstreren. Dit is nog een lap HTML van 32Kb

Overigens lijkt het op het eerste oog een box-model probleem Google daar maar eens op

[ Voor 20% gewijzigd door RobIII op 16-02-2006 22:09 ]

[Alex)]

Sorry voor de late reactie, heb het druk gehad.
Ik heb de code nu nog verder gestript tot een voorbeeld zoals het zou moeten, en zoals Fx en Opera het renderen.
De pagina staat hier: http://www.gymnasiumbreda.nl/admin/bekijktopic2b.html
Het is dus de bedoeling dat de buitenste div meestretcht zoals in IE, maar ik heb geen idee waarom dat niet het geval is in Fx. Helpt het eerder genoemde boxmodel in IE me?
Enige suggesties?

[RobIII]

Met alle respect, maar dit is nog steeds geen test-case en het is nog steeds een hele bult HTML en javascripts en andere stuff.
Pak nou gewoon eens een paar div'jes met de bijbehorende CSS die het probleem écht illustreren zonder alle andere meuk er om heen. Je probleem moet gewoon in een regel of 10 HTML en een regel of 20 CSS ofzo duidelijk te maken zijn. Laat dan alle "overbodige meuk" zoals plaatjes, achtergrondkleuren, opmaak enzovoorts weg totdat je alleen datene over hebt dat je probleem duidelijk illustreert. Met name je CSS is nog HUGE en je kunt van ons niet verwachten dat voor je uit te gaan puzzelen.

Aan de hand daarvan kunnen wij je helpen, maar nog beter: krijg je waarschijnlijk zelf een beter zicht op de situatie en vind je waarschijnlijk je fout zelf al. Dit is, IMHO, de eerste stap die iedere developer/web devver/whatever zou moeten uitvoeren als hij/zij op zoek is naar de oorzaak van een probleem.

Als je een probleem hebt met je auto (remt niet meer) ga je ook niet van de kofferbak tot de grille zoeken waar de fout zit, maar probeer je de fout te zoeken op logische plaatsen (remklauwen, leidingen, pedalen, dat soort dingen (ik ben geen automonteur ))

[ Voor 8% gewijzigd door RobIII op 19-02-2006 22:03 ]

[Alex)]

En toen vond ik het ineens: er stond ingesteld: height: 102px;, en Fx pakte dat netjes, terwijl IE er rekening mee hield.

Ik heb nu als oplossing:

code:

    _height: 102px;
    min-height: 102px;

Nu heb ik nog één probleem: de <div> met daarin de quote wordt over de hele breedte verspreid, maar ik heb het gevoel dat ik dat nog opgelost kan krijgen.

[JHS]

De hack die je nu bij height gebruikt is zinloos . Beide browsers zullen het eerste stament accepteren, waarna alleen firefox de min-height zal toepassen, en IE zal die negeren. IE < 7 that is.

[Alex)]

Die _ zorgt er toch voor dat alleen IE die regel toepast? Als ik die _ weglaat heb ik het probleem weer terug, en dat wil ik liever niet. Ach, ik zie wel hoe het verder loopt.

[JHS]

Alex: Ja. Maar door de volgorde van de statements zal FF daarna de min-height gebruiken, die IE zal negeren. Als dat niet zo is, ben ik of ernstig in de war, of speelt er iets anders mee...

[ Voor 27% gewijzigd door JHS op 19-02-2006 23:08 ]

[Alex)]

Ik weet het verder niet, ik weet alleen dat dat de truc was die het hem deed:


Die height is nodig omdat hij anders dingen door elkaar gaat zetten, en dat wil ik liever niet.
Nu moet ik alleen nog zorgen dat Fx en Opera de quotes en de tekst binnen het vlak houden, zoals IE dat netjes doet. Waarschijnlijk een probleem met width, aangezien die fluid is.

[JHS]

Sorry, je hebt toch gelijk .

[Sappie]

JHS schreef op maandag 20 februari 2006 @ 14:43:
Sorry, je hebt toch gelijk .

Dat heeft dan meer te maken met de overflow property die standaard visible is.

Verder interpreteert IE6 height als zijnde min-height en kun je deze IE-only CSS beter aan IE6 serveren door middel van conditional comments.

[ Voor 3% gewijzigd door Sappie op 20-02-2006 15:13 ]

[JHS]

Sappie schreef op maandag 20 februari 2006 @ 15:00:
[...] Dat heeft dan meer te maken met de overflow property die standaard visible is.

Nee. De vraag was of door de volgorde FF het tweede statement zou accepteren en dus zou renderen met behulp van min-height in plaats van height, waarvan ik namelijk uitging, en wat niet zo bleek te zijn. Of er nu een scrollbox was gekomen, of het een hidden of visible overflow had gehad maakt niet uit, het gaat erom dat de height van de box niet wordt aangepast.

Verder interpreteert IE6 height als zijnde min-height

Dat is, lijkt me, de basis van de testcase.

en kun je deze IE-only CSS beter aan IE6 serveren door middel van conditional comments.

Dat was niet het punt van de testcase. Nogmaals, het ging om de vraag of min-height height zou vervangen, wat het niet doet.

[Sappie]

JHS schreef op maandag 20 februari 2006 @ 15:37:
[...]
Nee. De vraag was of door de volgorde FF het tweede statement zou accepteren en dus zou renderen met behulp van min-height in plaats van height, waarvan ik namelijk uitging, en wat niet zo bleek te zijn. Of er nu een scrollbox was gekomen, of het een hidden of visible overflow had gehad maakt niet uit, het gaat erom dat de height van de box niet wordt aangepast.

Firefox 'accepteert' wel degelijk beide en handelt volgens de CSS recommendation (verhoog de min-height maar eens):

The following algorithm describes how the two properties influence the computed value of the 'height' property:

1. The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
2. If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
3. If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

hier vandaan: http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Verder wordt de groene achtergrond slechts weergegeven tot de "computed value for height" en zorgt de overflow property die standaard visible is ervoor dat de tekst toch nog getoond wordt.

Dat is, lijkt me, de basis van de testcase.

Dat was mij dus niet duidelijk. Ik dacht dat je wilde kijken hoe min-height en height tot elkaar in verhouding staan.

Dat was niet het punt van de testcase. Nogmaals, het ging om de vraag of min-height height zou vervangen, wat het niet doet.

Wanneer je dus de css spec erop had nageslagen had je dus al geweten hoe min-height en height tot elkaar in verhouding staan en dat het geen kwestie van 'vervangen' is

[JHS]

Sappie schreef op maandag 20 februari 2006 @ 16:00:
Wanneer je dus de css spec erop had nageslagen had je dus al geweten hoe min-height en height tot elkaar in verhouding staan en dat het geen kwestie van 'vervangen' is

Erw, ja, maar het zat nu eenmaal zo in mijn geheugen, ik heb de specs vaak zat gelezen, en ga dat niet elke keer opnieuw doen .

[Sappie]

Ik wist het een kwartier geleden ook niet exact.. maar wellicht was je sneller klaar geweest door er de specs even op na te lezen (en dan maar te hopen dat de browsers zich daar aan houden )