Az Internet Explorer (6) css bugjai 2.

iebugFolytassuk a listát további pár finomsággal amivel az Internet Explorer (6) meglephet bennünket css ügyben. Mint az előző cikkben is itt is transitional dtd melett előbukkanó css bugokról lesz szó. Ha valakinek van alkalma strict doctype melett letesztelni az itt bemutatott bugokat akkor örömmel várom a tapasztalatait!

A bugokat transitional dtd-vel teszteltem, strict dtd használata esetén várhatóan nem mindegyik fordul elő!

Terítéken a mai napon:

  • “Nohoveranim” avagy animált gifek a háttérben
  • “Notype” avagy a típusválasztók
  • “Htmlsource” avagy a html kód és a css
  • pre vs overflow

Nohoveranim bug

A bug leírása

Bármely elemnek adhatunk egy háttérképet, és semmi sem akadályoz meg bennünket abban, hogy a használt háttérkép egy animált gif file legyen. Sőt ezzel pofás kis effektusokat lehet létrehozni. Viszont sajnálatos módon az Internet Explorer (6) nem játsza le a háttérképet ha annak a hover esemény bekövetkezésekor kellene megjelennie.

Részletes magyarázat

Abban az esetben ha egy listában a css definíciónk az alábbi szerint néz ki, akkor az IE nem fogja lejátszani a hover esemény bekövetkezésekor lejátszandó animációt. A képet kicseréli, de az első képkockán leáll. A nem hover eseményhez kötött animát gifeket probléma nélkül kezeli.

.menuitem{background-image:url('./szamoca.gif');
   background-repeat:no-repeat;
   background-position:top left;
   list-style-type:none;
   height:35px;}
.menuitem a{text-decoration:none;
   color:#f00;
   font-variant:small-caps;}
.menuitem:hover{background-image:url('./szamoca-anim.gif');
   background-repeat:no-repeat;
   background-position:top left;
   text-decoration:underline;}

És az ehhez tartozó html kódrészlet

<ul>
<li class="menuitem">
   <a href="edesseg.html">Édességek</a>
</li>
</ul>

És a két képecske:

Megoldás a bugra

Nincs általam ismert megoldás.

Notype bug

A bug leírása

Az Internet Explorer nem ismeri fel a típusválasztó css szelektorokat, ezeket egyszerűen figyelmen kívül hagyja.

Részletes magyarázat

Az IE nem tudja kezelni a h1[title=cim], input[type=text] tipusú css definíciókat. Ezeket figyelmen kívül hagyja, mintha nem is szerepelnének a css definíciónkban, így a <h1 title="cim"> goranga </h1> és az <input type="text" /> elemeink formázása el fog veszni.

Megoldás a bugra

Ha csak lehet ne használjuk a típusválasztókat, vagy adjunk meg ezeknek az elemeknek sima osztálydefiníciót, amit az IE is le tud kezelni.

Htmlsource bug

A bug leírása

Amennyiben egy div-en belül nincs más csak egy kép, akkor a kész oldal formázása FÜGG a html forráskódtól.

Részletes magyarázat

Vélemyénem szerint ez a legalatomosabb, és legfelháborítóbb bug mind közül. E miatt a html forráskódon kell változtatnunk, hogy azt a látvány eredményt kapjuk mint amit szeretnénk. Ha a html forrásban van egy újsorunk a kép előtt az alábbi forráskód szerint akkor azt az eredményt kapjuk IE-ben, hogy a div-ünk piros háttere látszani fog, hiába állítottuk a div méretét a kép méretéhez 100*100-ra.

<div style="background-color:red;width:100px;height:100px;">
	<img src="images/vezerkepek/ie.jpg" />
</div>

Míg ha nincs akkor mást.

<div style="background-color:red;width:100px;
   height:100px;"><img src="images/vezerkepek
   /ie.jpg" /></div>

Megoldás a bugra

Használjuk a második pontbeli verziót.

pre vs overflow bug

A bug leírása

pre elembe ágyazott szöveg használata esetén a floatot használó design széteshet.

Részletes magyarázat

Abban az esetben ha az oldalunk felépítéséhez floatolt diveket használunk és a pre elembe helyezett szöveg nem fér el a rendelkezésére álló helyen, akkor a normál böngészők egyszerűen továbbfolyatják a szöveget és így az kilóg a rendelkezésére álló helyről. Az IE ugyanezt teszi, de mivel hibásan valósítja meg a visual formatting modelt a design szét fog esni, a pre elemet tartalmazó divünk függőlegsen be fog csúszni a többi alá.

Megoldás a bugra

Ha használjuk a pre-t, akkor mindig ellenőrizzük le, hogy a benne lévő szöveg nem hosszabb-e a rendelkezésre álló helynél. Egy dolog, hogy IE alatt szétesik tőle a design, de a többi böngésző alatt is rendkívül ronda ha kilóg a neki tervezett helyről.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.