bug, css, explorer

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>

Folyt köv…

Ez a bejegyzés rrd billentyűzetéből potyogott ki 2006 április 24. napján 15:29:55-kor. Eddig 4,757 olvasást ért meg. A visszajelzéseket nyomonkövetheted ezzel az RSS feed-el. Véleményt nyilváníthatsz, vagy trackbackolhatsz a saját oldaladon.