[CSS] floats IE&FF vs Opera&Safari - Softwareontwikkeling

dinsdag 16 oktober 2007 15:05

Acties:

Topicstarter

Het volgende probleem doet zich bij mij voor waar ik niet echt goed uitkom.
Voor het gemak heb ik het gereduceerd tot de volgende code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<title>Title</title>
<style type="text/css">
        div{width:600px;background:gray;}
        img{float:right}
</style>
</head>
<body>
<div>Test<img src="plaatje.gif" /></div>
</body>
</html>

Wat ik heb is een tekst en een afbeelding in een blocklevel element. De tekst is normaal links uitgelijnd, de afbeelding moet echter rechts komen. Dit doe ik dmv een float.
In FF en IE komt de rechts gefloate img echter op de volgende regel terecht. In Safari en Opera wordt de img wel op de manier weergegeven zoals ik dat wil...

de vraag is...welke browser doet het goed? Is dit wel de manier om mijn probleem aan te pakken? En natuurlijk, hoe zorg ik ervoor dat dit in deze vier browsers hetzelfde wordt weergegeven?
De structuur van de HTML is helaas niet aan te passen...

[ Voor 4% gewijzigd door hing op 16-10-2007 15:06 ]

dinsdag 16 oktober 2007 15:29

Acties:

gvanh

Webdeveloper

Wat ik begrijp uit je verhaal, is dat in de uiteindelijke "content" die in de pagina komt eerst de tekst staat en vervolgens het plaatje dat rechts gefloat wordt? En dat je de volgorde daarvan niet kan aanpassen, omdat dat een gegeven is (komt waarschijnlijk uit een database?)

Je zou kunnen proberen om de img een negatieve top-marge mee te geven. Lastige daarvan is, dat je waarschijnlijk niet weet wat de lengte van de tekst is, en dus ook niet hoe groot die negatieve marge dan zou moeten zijn.

CSS voor de img wordt dan dus:

Cascading Stylesheet:

1	img { float: right; margin-top: -20px } /* of meer pixels indien nodig */

Lijkt me echter glad ijs. Ik heb het ook wel eens geprobeerd om tekst tussen twee blokken te laten doorlopen. Is uiteindelijk ook niet gelukt. Je zou nog kunnen overwegen om met JavaScript aan de gang te gaan ... bijvoorbeeld door onload een functie aan te roepen die uit de betreffende tekst de eerste afbeelding pakt en die boven (voor) de rest van de tekst zet.

dinsdag 16 oktober 2007 15:33

Acties:

Blaise

Als het kan, plaats dan de afbeelding vóór de tekst binnen de div. Dan doen alle browsers de afbeelding op de eerste regel.

[ Voor 11% gewijzigd door Blaise op 16-10-2007 15:34 ]

dinsdag 16 oktober 2007 15:36

Acties:

crisp

Devver

Pixelated

ZIe Blaise ^^^

In feite is dit een bug in IE en Firefox, Opera en Safari doen het zoals het volgens de specificatie zou moeten.

Intentionally left blank

dinsdag 16 oktober 2007 17:06

Acties:

hing

Topicstarter

ah, bedankt! een bug...vandaar dat ik na lang zoeken en rommelen er niet uit ben gekomen.
De negatieve topmargin had ik in eerste instantie als oplossing bedacht, maar dan krijg je dat in Opera en Safari dat de img boven het blocklevel element uitkomt.

Het was me inderdaad opgevallen dat de tekst de "oorzaak" van dit probleem was. Als je de tekst weghaalt, dan gaat het namelijk wel goed.

Puur uit eigen interesse, wat zou dan een handige oplossing zijn als er WEL een aanpassing gemaakt zou kunnen worden in de html?

Ik heb gezien dat als je de tekst in een span stopt en deze float:left meegeeft, dat het er wel "goed" uitziet....je hebt dan alleen nog het "clearing probleem"

[ Voor 13% gewijzigd door hing op 16-10-2007 17:09 ]

dinsdag 16 oktober 2007 23:26

Acties:

Blaise

Om floats te clearen kan je een onzichtbare div (height:0) toevoegen aan je html, met clear both. Er bestaat ook een CSS workaround die werkt momenteel in alle moderne browsers om floats te clearen zonder extra markup:

Cascading Stylesheet:

.elementWaarnaFloatsGecleardMoetenWorden {
   float: left;
   display: inline-block /* Clear float in IE */
}

/* Clear float in Opera/Gecko/Webkit */
.elementWaarnaFloatsGecleardMoetenWorden:after{
   clear: both;
   content: '.';
   display: block;
   height: 0;
   visibility: hidden
}

dinsdag 16 oktober 2007 23:30

Acties:

crisp

Devver

Pixelated

Blaise schreef op dinsdag 16 oktober 2007 @ 23:26:
Om floats te clearen kan je een onzichtbare div (height:0) toevoegen aan je html, met clear both. Er bestaat ook een CSS workaround die werkt momenteel in alle moderne browsers om floats te clearen zonder extra markup:

[...]

Ik hoopte dat je ging vertellen dat je het containing element gewoon overflow: auto of hidden moet geven voor 'auto-clearing'

Intentionally left blank

woensdag 17 oktober 2007 13:13

Acties:

hing

Topicstarter

crisp schreef op dinsdag 16 oktober 2007 @ 23:30:
[...]

Ik hoopte dat je ging vertellen dat je het containing element gewoon overflow: auto of hidden moet geven voor 'auto-clearing'

bovenstaande oplossing ken ik inderdaad....
ik gebruik wel eens wat clearing divs, niet netjes, maar vind ik wel pragmatischer.
In mijn geval moet ik sommige elementen wel floaten en dan weer niet...om nou op alle elementen een extra klasse mee te geven vond ik maar niks..

maar zo te zien biedt overflow: auto en hidden de ultieme oplossing? even uit proberen!

maar om even terug te komen op de topic...is het toevoegen van een extra element die je kunt gaan floaten een nette oplossing?

[ Voor 19% gewijzigd door hing op 17-10-2007 13:14 ]

woensdag 17 oktober 2007 17:04

Acties:

Blaise

crisp schreef op dinsdag 16 oktober 2007 @ 23:30:
[...]

Ik hoopte dat je ging vertellen dat je het containing element gewoon overflow: auto of hidden moet geven voor 'auto-clearing'

Sorry crisp

mijn verstand liet mij even in de steek.

maar om even terug te komen op de topic...is het toevoegen van een extra element die je kunt gaan floaten een nette oplossing?

Ik kies indien mogelijk altijd voor een CSS oplossing aangezien die voor de styling is bedoeld. Mijn HTML houd ik het liefst zo schoon mogelijk.

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

donderdag 18 oktober 2007 10:42

Acties:

hing

Topicstarter

Blaise schreef op woensdag 17 oktober 2007 @ 17:04:

Ik kies indien mogelijk altijd voor een CSS oplossing aangezien die voor de styling is bedoeld. Mijn HTML houd ik het liefst zo schoon mogelijk.

dat klinkt op zich heel logisch, ware het niet dat ik sowieso een wijziging moet aanbrengen in de HTML om dit probleem op te lossen. dan kies ik liever voor een oplossing waar de volgorde van mijn html elementen niet uitmaken.... of is dit een foute redenering?

donderdag 18 oktober 2007 17:56

Acties:

Blaise

Dat hangt af van de context