Méretezés

Magasság

Tulajdonság Érték Leírás
height
Magasság
auto A böngésző számítja ki az elem magasságát. Ez az alapértelmezés.
length A magasság megadása px, cm, satöbbiben.
% A tartalmazó blokk százalékos értéke lesz a magasság
line-height
Sortávolság
normal normál
length hossz
% százalékos
max-height
Legnagyobb magasság
none Nincs megadva a maximális magasság. Rz az alapértelmezés.
length A maximális magasság megadása px, cm, satöbbiben.
% A tartalmazó blokk százalékos értéke lesz a maximális magasság.
min-height
Legkisebb magasság
length A minimális magasság megadása px, cm, satöbbiben.
% A tartalmazó blokk százalékos értéke lesz a minimális magasság

Szélesség

Tulajdonság Érték Leírás
width
Szélesség
auto A böngésző számítja ki az elem szélességét. Ez az alapértelmezés
length A szélesség megadása px, cm, stb.
% A tartalmazó blokk százalékos értéke lesz a szélesség
max-width
Legnagyobb szélesség
none Nincs maximális szélesség, ez az alapértelmezés.
length A maximális szélesség megadása px, cm, stb.
% A tartalmazó blokk százalékos értéke lesz a maximális szélesség
min-width
Legkisebb szélesség
length A minimális szélesség megadása px, cm, stb.
% A tartalmazó blokk százalékos értéke lesz a minimális szélesség

Volt és van (egyszer reméljük a szabvány az szabvány lesz) egy kis gond a szélesség értelmezéssel. Egy nagyon egyszerű div-et írva, tesztelve öt friss verziójú böngészővel a következő eredményeket kapjuk:

...

...
<body>
...
 
sdg
... </body>

Böngésző Szélesség Magasság
Firefox 3.6.6 222 42
IE 8. 8.0.7600.16385 200 41
Opera 10.53 222 41
Chrome 5.0.375.99 222 42
Safari 5.0.(7533.16) 222 42

Az IE és az Opera 1-1 pixeles magasság eltérésétől tekintsünk el.
Viszont komoly eltérést látunk az IE szélessége illetve a másik négy böngésző szélessége között. Hogy számol az IE?

A tartalom szélességét veszi a width tulajdonság értékének.
És a többi böngésző?
width=Bal margó+bal keret szélesség+bal oldali belső margó + tartalom+jobb oldali belső margó + jobb oldali keret szélesség+ jobb margó
Ez az esetünkben:10+1+10+200+10+1+10=222 px;

A megoldás

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...

...
<body>
...
 
sdg
... </body>

A DOCTYPE megadása az oldal legelső sorába, még a HTML elé.
A DOCTYPE-ról itt olvashatsz: klikk

Böngésző Szélesség Magasság
Firefox 3.6.6 222 42
IE 8. 8.0.7600.16385 222 41
Opera 10.53 222 41
Chrome 5.0.375.99 222 42
Safari 5.0.(7533.16) 222 42
Megjegyzés: ez is csak az IE6-tól működik. Ha valaki úgy gondolja, hogy használnak még ennél régebbi böngészőt, akkor két megoldás marad.
1. Böngésző függő CSS írása
2. Hack-elés (a Google-ban keressen a box model hack kifejezésre).

ugrás a lap tetejére