float/clear in IE <--> NS, IE bug?

[anoniem]

Ik heb een vervelend probleem met CSS layout en ik hoop dat hier iemand een oplossing weet. Ik wil een pagina waarop tekst tussen plaatjes doorloopt. Die plaatjes moeten op verschillende hoogtes komen. Ik heb dit alsvolgt geprobeerd op te lossen: In de CSS: [code:1:42766e6619] .links { float: left; clear: both; } .rechts { float: right; clear: both; } [/code:1:42766e6619] In de HTML: [code:1:42766e6619] <img src='plaatje.jpg' class='links' /> <img src='plaatje.jpg' class='rechts' /> Tekst tekst tekst (...) tekst [/code:1:42766e6619] [url=http://wwwhome.cs.utwente.nl/~schaik/test23.html]Hier[/url] is een voorbeeld. Als ik deze pagina bekijk in Mozilla FireBird 0.6.1 dan geeft hij de pagina weer zoals ik wil, maar in Internet Explorer 6sp1 komen de plaatjes op gelijke hoogte te staan. Volgens mij wordt de "clear: both" dus niet goed geinterpreteerd. Naast de plaatjes zouden geen floating elements, andere plaatjes dus, mogen worden weergegeven. Vragen: 1. Klopt mijn interpretatie van "clear: both"? Dus klopt het dat IE deze pagina incorrect weergeeft? 2. Hoe maak ik met behulp van XHTML/CSS een pagina die door IE wordt weergegeven zoals ik wil?

[anoniem]

http://www.w3schools.com/css/pr_class_clear.asp

[anoniem]

Als ik het goed begrijp: Wil je het tweede plaatje lager dan het andere en moet de tekst ertussendoor lopen? Als dat correct is (is iig het visuele resultaat in Mozilla 1.6a). Doe dan het volgende: Haal clear:both weg. Gebruik margin. Anne

[anoniem]

Maw: 1) Ja, jouw interpretatie klopt en ja, IE doet het niet goed. 2) Geen idee, een bug is niet altijd te ondervangen. IE is nou eenmaal geen held als het aankomt op verregaande ondersteuning van CSS. Als het al ondersteuning biedt dan is het vaak verkeerd of incompleet. Kan je weinig aan doen. Als Mozilla (Firebird) het goed weergeeft kan je er over het algemeen vanuit gaan dat jouw implementatie klopt. Wat je overigens even zou kunnen testen is of het wel goed werkt als je ze beiden [b:e78c983784]float: left[/b:e78c983784] meegeeft... - Bas

[anoniem]

Bedankt voor de reacties tot zover. W3Schools zegt over clear: [quote:d3097d3236]This property does not always work as expected if it is used along with the "float" property.[/quote:d3097d3236] Dat is duidelijk, maar daar kom ik niet verder mee... :( Over het gebruik van margin: Ik neem aan dat je bedoelt aan het rechterplaatje een [b:d3097d3236]margin-top[/b:d3097d3236] meegeven van de hoogte van het linkerplaatje? Zoals [url=http://wwwhome.cs.utwente.nl/~schaik/test24.html]hier[/url]? Dan loopt de tekst niet door naar rechts boven het rechterplaatje. Bovendien komt er een CMS achter de pagina, dus de hoogte's, volgorde's enz. van plaatjes kan veranderen. Bas: Wat bedoel je met [b:d3097d3236]float: left[/b:d3097d3236]? Dan komen de plaatjes toch allebei links? IE zet ze dan trouwens wel onder elkaar. (Zie [url=http://wwwhome.cs.utwente.nl/~schaik/test25.html]hier[/url])

[anoniem]

[quote:a7b6e1a743="mjvs"]Bas: Wat bedoel je met [b:a7b6e1a743]float: left[/b:a7b6e1a743]? Dan komen de plaatjes toch allebei links? IE zet ze dan trouwens wel onder elkaar.[/quote:a7b6e1a743]Ik vermoedde al zoiets, volgens mij heb ik dit probleem al eens gehad. IE's ondersteuning voor [b:a7b6e1a743]float[/b:a7b6e1a743] laat veel te wensen over, en er is helaas niet altijd iets wat je eraan kan doen. Ik zal eens nadenken over een omweg... Nu ik er wat beter over nadenk, denk ik dat je moet zorgen dat de pagina [url=http://validator.w3.org/]valideert[/url]. IE6 ondersteunt de standaarden beter dan IE5.5, maar als de pagina niet aan bepaalde voorwaarden voldoet dan komt IE6 in Quircks Mode en gedraagt zich dan feitelijk als IE5.5. - Bas

[anoniem]

Ik weet voor 90% zeker dat het onmogelijk is om exact te krijgen wat je wil (crossbrowser werkend). Quirks mode/standard compliant mode heb ik al getest, haalt niks uit. Je zou wel bijvoorbeeld 1 plaatje per paragraaf kunnen doen om het een en ander wat beter werkend te krijgen. Met googelen kwam ik niet veel verder dan deze pagina: http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html :) Anne

[anoniem]

De eerste testpagina die ik heb gemaakt valideert nu. Had ik al eerder geprobeerd, haalt inderdaad niets uit. Als ik het rechterplaatje middenin te tekst zet (zie [url=http://wwwhome.cs.utwente.nl/~schaik/test26.html]voorbeeld[/url]) dan komt het plaatje wel lager uit, maar hoogte hangt dan af van breedte van browser. Ik vrees dat ik de plaatjes toch per paragraaf moet invoegen... :(

[anoniem]

Of een melding op de pagina: [b:cd2e4d0384]Deze pagina kan het best bekeken worden zonder Internet Explorer![/b:cd2e4d0384] :roll: - Bas