Keskustelu: Nettisivujen teko: IE7, ongelma floatin kanssa

Hellurei, tämähän on ilmeisesti tiedettykin ongelma IE7:n kanssa, mutta en löytänyt Googlella tai Putkasta hakemalla apua tähän, kun on kaksi kuvaa vierekkäin ja tekstikin mukana.

Eli, toimii Firefoxilla ja IE8:lla hienosti, iso kuva tulee vasemmalle puolelle ja sen viereen oikealle puolelle ensin pienempi kuva ja sen jälkeen teksti pikkukuvan alle. Neliöt alla ovat kuvia ja a-kirjaimet tekstiä, tässä tapauksessa p:llä eli kappale.

|'''|''|
|   |__|
|   |aa
|___|aa

Vielä sorsaa:

<img src="isompi.png" width="357" height="341" alt="" style="padding-right: 32px;" /><img src="pienempi.png" class="pienempi" />
<h4>Otsikko:</h4>

<p>Tekstiä<br />
väkisin<br />
tehdyillä<br />
rivivaihdoilla,<br />
jotta saadaan<br />
listatyyppisesti.
</p>

CSS:

#content p {
	margin: 0;
	padding: 5px 0 5px 0;
	font: 12px/18px Arial, Helvetica, sans-serif;
}

#content img {
	padding: 0;
	float: left !important;
	clear: both;
	margin-right: 10px;
	border: 0;
}

#content .pienempi {
	padding: 0;
	float: none !important;
	display: inline;
}

Kiitos vastaajille jo etukäteen, itsellä tuli umpikuja tämän kanssa.

Helpottaisi jos olisi testisivu netissä tai mahdollisimman tarkka kuvaus siitä, miten IE7 vetää väärin (etenkin näillä pikavisiiteillä).

Niin joo, tosiaan IE vetää väärin sen siten, että kaikki on allekkain. Ensin iso kuva, sen alla pienempi kuva ja sitten taas sen alla teksti.

Minusta tyyleissäsi on useampikin asia oudosti. Miksi float ja clear molemmilla kuvilla (vaikka osittain kumotaankin myöhemmin)? Miksi padding-määreet, kun ei sitä kuvilla yleensä ole kuitenkaan? Miksi inline, kun kuitenkin halutaan ennemmin lohkoelementti?

Itse lähtisin ehkä jostain tällaisesta liikkeelle:

#content img {
  display: block;
  border: 0;
}
#content img.isompi {
  float: left;
  clear: both;
}

Kiitos Metabolixille!

Lisäsin vielä #content .pienempi -kohtaan clear: right;

Nyt ei ole IE7:aa käsillä, mutta teki samaa bugitusta IE6:lla ja nyt toimii sekä Firefoxilla että IE6:lla.

Jälleen kerran ratkaisu lähti aika helpoista, itsellä oli taas tuo tyylimääritys lähtenyt vähän lapasesta.

Kiitti!