IE box model

Emlékszünk még azokra az időkre, amikor az ie box model-je eltért a többi browser által alkalmazott box model-től? Mindenki szidta a microsoftot érte, pedig ha végiggondoljuk, egész logikus dolog volt.

Aki nem értené, annak egy rövid ismeretterjesztés: régebbi ie verziókban a html elemek width és height propertyje a content+padding+border értékét adta (természetesen a margin nem számított bele), míg a többi browserben csak a content értékét. Azaz ha én beállítottam pl. 100px-re a width értéket, 20px-re a paddingot és 1px-re a bordert, az adott elem ie-ben 100px széles volt (és a tartalom lett 100px - 2*20px - 2*1px = 58px), míg a többi browserben 100px + 2*20px + 2*1px = 142px széles (és a tartalom maradt 100px).

Ezt most értettem meg igazán, ugyanis a következőt szeretném csinálni: van két divem, mindkettő pontosan 50% széles, és float: left-tel egymás mellé vannak helyezve. Azonban szeretném, ha a divekben levő tartalom egy bizonyos távolságra helyezkedne el a divek szélétől, mert így javul az olvashatóság, de a diveknek továbbra is össze kell érniük (azaz a width: 49% nem megoldás).

Ezt a régi ie box model-ben egy egyszerű padding érték megadásával el lehetett érni.

Most ez nem működik, mivel a padding megnöveli az elem méretét, ezért a float-tal egymás mellé helyezett divek egymás alá csúsznak. Ehelyett kénytelen voltam azt csinálni, hogy a két diven belül létrehoztam 1-1 segéddivet, azokba kerül a tartalom, és azoknak már meg lehet adni paddingot.

(Ha valakinek van szebb megoldása, ne tartsa magában. :))

Én azt értem, hogy a standard-ek jók, de a rossz standard-ek szerintem nem jók.

Hozzászólások

Paddingot ahol lehet kerülni, ha szélesség is meg van adva mellette. nem szép, de legalább üzembiztos.

Ugyanígy a mindenféle positiont is kerülni kell, hacsak tényleg nem indokolt annak használata és nincs más megoldás.

----------------
Lvl86 Troll

A problémát olvasva – azt hiszem, – én is segéddivekkel oldottam volna meg, ami ugyan ellentmond annak az alapvetésnek, hogy ne pakoljunk csak a formázás kedvéért plusz HTML-tageket a forrásba, de őszintén megvallva ilyen esetkben nagy ívben tojok erre az elvre, mert nem fogok azzal órákat szívni, hogy összetákoljak valami még gányabb megoldást.

Én amúgy mind a mai napig el szoktam felejteni először a padding+border beszámítását, aztán csodálkozok, hogy miért nem a megfelelő helyre teszi. A vázoltakat tekintve nekem is logikusabb lenne a másik modell, bár lehet, hogy csak azért, mert gyakran kényelmesebb lenne.

Ettől függetlenül azért én is kíváncsi lennék rá, hogy erre mi az okos megoldás :)

Amúgy meg valahol (habár kétségtelenül csekélyebb mértékben) még ma is igaz, miszerint A web dizájn egy méreg, ami csábít a szép felületekkel, aztán a css-t kódolva pusztulsz el. (forrás)
Csak ma már a modernebb oldalak esetén a CSS-hez hozzá jön a JS és esetleg a HTML5 ;)

Nem véletlenül a fix széles layoutok a menők manapság. :)