Böngészőprogramnak nevezünk minden olyan programot amely képes weboldalakat megjeleníteni. Ha ezt a definíciót vesszük alapul, akkor sajnos az Internet Explorert (6) nem nevezhetjük böngészőnek. Ennek ellenére sokan használják weblapok nézegetésére. Itt kezdődnek a css programozók hányadtatásai.Figyelem! Azok akik ezt az oldalt nem Internet Explorer (6) böngészővel nézik a példákból nem sokat fognak látni, mert a többi böngésző helyesen jeleníti meg az itt leírt bugokat. Mindenesetre nekik is tanulságos elolvasni a lentieket.
A bugokat transitional dtd-vel teszteltem, strict dtd használata esetén várhatóan nem mindegyik fordul elő!
Lássunk előszőr egy kis listát azokról a bugokról amiről ez a cikk szólni fog. Igyekszem ide összeszedni minden bugot, így ez a cikk folyamatosan bővülni fog. A leírásokban megismerkedhetünk az Internet Explorer (6) css bugjainak legnagyobb és legelbűvölőbb szépségével, azzal, hogy az egyik bugot a másikkal tudjuk sok esetben kijavítani.
- “Padwid” avagy a visual formatting model hibás megvalósítása
- “Noauto” avagy a középre igazítás problematikája (1)
- A középre igazítás problematikája (2)
A padwid bug
A bug leírása
A css2 specifikáció visual formatting modelje szerint a width érték az elem szélességét határozza meg. Az Internet Explorer (6) ezt a modelt hibásan valósítja meg, mivel a width értéket az elem vizuális nagyságával felelteti meg.
Részletes magyarázat
Hozzunk létre egy boxot ami 190px széles és 30px magas.
<div style="width:190px; height:30px;"> goranga </div>
A visual formatting model szerint az elem vizuális szélessége a következők szerint kalkulálható ki:
vizuális szélesség = az elem szélessége (width érték) + jobb és bal oldali padding + jobb és bal oldali border
a dokumentumban elfoglalt szélesség = vizuális szélesség + jobb és bal oldali margin
A fenti kalkuláció miatt amikor egy vizuálisan 190 px széles boxot akarunk létrehozni, 20 px-nyi bal és jobb oldali paddinggal, akkor a width:150px;padding-left:20px;padding-right:20px definíciót használjuk.
Vagyis adjunk meg az előző boxunknak egy 20px-es jobb és bal oldali padding értéket és a width értéket csökkentsük ezek összegével. A boxunknak vizuálisan ugyanolyan szélesnek kell maradnia és a szövegnek 20 pixellel beljebb kell kezdődnie. A legtöbb böngészőben ez is történik.
<div style="width:150px; height:30px;
padding-left:20px; padding-right:20px;">
goranga
</div>
Ezzel szemben ha valaki Internet Exoplorerrel (6) nézi az oldalt akkor azt fogja látni, hogy a box szélessége vizuálisan is csökkent (150 px), és a felirat 20 pixellel beljebb kezdődik.
Ez a bug többoszlopos tableless oldalak kialakításánál okozhatja a legtöbb problémát. Ilyen esetben pl megadjuk, hogy a bal oldali és a jobb oldali oszlopok legyenek 15-15% szélesek, és a középső tartalmi rész 70% széles legyen akkor bármelyik oszlopnak megadunk egy padding-left vagy padding-right értéket akkor a design szét fog esni.
Megoldás a bugra
Létre kell hoznunk a boxunkon belül egy másik boxot. A külsőnek adjuk meg a szélesség értéket, a belsőnek pedig a padding értéket.
<div style="width:190px; height:30px;">
<div style="padding-left:20px;padding-right:20px;">
goranga
</div>
</div>
Noauto bug
A bug leírása
Az Internet Explorer (6) nem jól valósítja meg a margin:auto definíciót. A css specifikáció szerint ennek középre igazítást kellen eredményeznie, de az IE hibásan balra igazításként valósítja meg. A következő boxot a legtöbb böngésző középre igazítja, míg az Internet Explorer (6) balra.
<div style="margin:0 auto; width:200px;"> goranga </div>
Megoldás a bugra
Jelszó: bugot buggal.
Ezt az IE bugot egy másik buggal tudjuk kijavítani. Az IE ugyanis hibásan valósítja meg a text-align:center utasítást.
<div style="text-align:center">
<div style="margin:0 auto; width:200px;
text-align:left;">
goranga
</div>
</div>
A középre igazítás problematikája kettes számú bug
A bug leírása
Ez a bug szorosan kapcsolódik az előzőhöz. Ha egy boxnak megadjuk a text-align:center definíciót akkor az IE (6) ezen bugja miatt ennek a boxnak a leszármazott boxaiban nem csak a szöveget, hanem az egész (leszármazott) boxot középre fogja igazítani.
<div style="text-align:center;background-color:pink;">
goranga in pink
<div style="width:200px;">
goranga
</div>
</div>
Részletes magyarázat
Ez a bug akkor okoz meglepetéseket ha van olyan boxunk amiben szeretnénk középre igazított szöveget használni, mert akkor ennek a boxnak a leszármazott boxait mind középre fogja igazítani az IE a css specifikációban meghatározott alapértelmezett balraigazítás helyett.
Megoldás a bugra
Vezessünk be a szülő boxunkba egy új div-et és annak adjuk meg a text-align:center definíciót, így a másik boxunk ennek a testvérévé, nem pedig leszármazottjává válik.
<div style="background-color:pink;">
<div style="text-align:center">
goranga in pink
</div>
<div style="width:200px; text-align:center">
goranga
</div>
</div>