Keskustelu: Nettisivujen teko: Kiusallinen ie:n css-bugi floattaavan divin kanssa

Minulla on erittäin kiusallinen ongelma IE:n kanssa. Se "toimii" sivuillani aina tietyissä tilanteissa:

Tein selkeämmän esimerkkisivun, jossa ei ole mitään muuta kuin oleellinen: http://sooda.dy.fi/outo_iebug.php

Eli siis, on yksi tietyn levyinen div-laatikko, jolla on float: left -määre. Kutsutaan tätä vaikka "vasenlootaksi". Sen jälkeen tulee sisältö, jolle en halua kiinteää leveyttä, vaan haluan että se menee selaimen oikeaan reunaan asti. Siksi sitä ei voi floattia minnekään, tarttis kiinteän koon että onnistuis, vai mitä.

Sisällöllä on vasenta marginia sen verran, että vasenloota mahtuu, eikä sisällön tekstiä mene sen alle. Vasenloota on 200 pikseliä leveä ja sillä on 10px vasenta marginia, sisällön vasen margin on sitten 220px.

Ongelma on, että kun sisällössä on jotain sellaista, joka ei "mahdu" vasenlootan ja selaimen oikean reunan väliin, se ja kaikki sisältö sen alta pomppaa niin alas, että vasenloota on jo ohi. Katso linkki ie:llä tai linkistä löytyvä kuva selvennykseksi.

Miten saan tuon näkymään niin kuin muilla selaimilla, eli sisällön ylimenevän osan vaan menemään yli?

Kokeiltu on jo ainakin overflow: scrollia yms. ja navin eri puolille sijoittelua, joka ei oikein toimi. Jos sisällölle antaa leveyden mitään muuta tekemättä, koko laatikko pomppaa alas.

h1 {
	background: #faa;
}
#floatbox {
	position : absolute;
	width: 200px;
	background-color: #0a0;
	display: inline;
	left : 10px;
}
#content {
	margin: 0 10px 0 220px;
	background-color: #aaf;
}

Lisää lisäksi ylimääräinen div floatboxin ja contentin ympärille, että selaimet tajuaa mille korkeudelle se position: absolute; pitää sijoittaa. IE:n (ja Operankin) jotkut ongelmat korjautuu sillä, että lisää koko sivun kattavan elementin.

Tässä tapauksessa iskit kahteen bugiin IE:ssä: ensimmäinen liittyy floatattujen boksien virheelliseen käyttäytymiseen ja toinen taas johtuu siitä, ettei semmoinen kuin hasLayout ole automaagisesti päällä kaikilla elementeillä. Tämän hasLayout bugin voi korjata sillä, että hasLayoutin laittaa päälle. Helpointa se on seuraavalla CSS:llä:

* { zoom: 1 }

Tämä toisaalta rikkoo taas CSS:n toimintaa tietyissä tapauksissa, joten tuon hasLayoutin kanssa saa joskus tosissaan taistella.

Floattibugin taas olisi voinut kiertää sillä, ettei elementin sisältöä pakota liian leveäksi, jolloin elementti olisi alkanut sieltä mistä pitääkin (kun tuon hasLayoutin korjasi, putosi sisältöelementti ihan alas, koska se oli liian leveä).

Muoks!
Ai joo, ja leveyden määrittäminen asettaa hasLayoutin päälle.

Eikä sitten kysytä missä he*****ssä minä olen oppinut näitä juttuja.

Hyvin toimii muuten, mutta unohtui sanoa, että tahtoisin aivan sivun alle palkin kuten sivuillani sooda.dy.fi :/ nyt jos sisältö on matalampi kuin vasen loota niin palkki pomppaa lootan läpi tuolla clear: bothilla kun floatbox ei olekaan float enää. Kuinka sen sitten saisi alas?

Ja mitä tuo zoom vaikuttaa, kokeilin ottaa poiskin enkä huomannut eroa? :P

Kokeile zoomia alkuperäisellä sivullasi ja huomaat eroja.

Voit kiertää tuon ongelmasi sillä, että määrittelet min-heightin sisältöosiolle, joka on samankorkuinen kuin vasen palkki. IE ei tietty min-heightiä ymmärrä, mutta se käsittelee pelkkää heightiä min-heightin tavoin, joten sille voi syöttää conditional commentilla oman säätönsä.