WIDTH: mennyi az annyi?

Ha unjuk már, hogy egykét pixel eltérés mindig van, ha oldalunkat más-más böngészőben nézzük, és végső elkeseredésünkben a CSS-hez fordulunk, nos akkor lehet igazán idegesítő, hogy az elvileg szabványos CSS sem ugyanazt jelenti külöböző gyártóknál.

A probléma először akkor jelent meg számomra, amikor egy igen kötött dizájnhoz kellett megcsinálni magát az oldalt, és sehogy sem akart passzolni a dolog minden browserben. Fél nap próbálgatás után rájöttem, hogy az általam használt PADDING értéket a Firefox hozzáadja a megadott (WIDTH) szélességhez, az Explórerben viszont ez egyáltalán nem számít, ott a WIDTH értéke a főnök. Ezekszerint ugyanaz a hatás csakis 0 PADDING mellett működhet.

A cikk megírásakor, amikor előtúrtam eme régi sérelmemet, gondoltam ellenőrzöm, kinek van igaza. Hát nem okozott kimondottan nagy meglepetést, hogy a hivatalos CSS2 szerint a Firefox dolgozik jól, vagyis a WIDTH az elem tartalmának szélességét adja meg, nincs benne sem a PADDING sem a BORDER sem pedig a MARGIN.

A WIDTH attribútum eltérő működése
Eltérő WIDTH értelmezések

Az viszont meglepő volt, hogy az IE referenciában találtam egy "kompatibilis módot". Ez azt jelenti, hogy bizonyos esetekben az IE átvált a szabváynos (CSS szerinti) értelmezésre, ez pedig az az eset, ha mi magunk is szabványos HTML kódot írunk.

Ezen a ponton az Explórer kap tőlem egy hatalmas pirospontot ezért a megoldásért.

Bár kérdéses, mennyire van ez összhangban Jon Postel örökérvényű szabályával, amely az Internetet a mai napig működteti, mindenképpen a lehető legjobb megoldás tekintve, hogy egyes régebbi olalak a fentemlített működsére számítanak az Explórertől.

Deklaráljuk a HTML tipusát

A gyakorlatban: ha CSS szerinti viselkedést szerenél az oldaladhoz (azaz ugyanolyan megjelenést minden böngészőben), deklarálnod kell a használt HTML típusát egy DOCTYPE taggel. Pédául (a HTML fájlod legeslegelejére, még a kezdő <html> elé):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Külső linkek