ZINA DESIGN - webdesign ötletek, honlap tippek, weblap készítés » hack

IE7 áttetsző png háttér probléma

Zina — Thu, 19 Nov 2009 18:22:14 +0000

Az IE7-et azért szeretem jobban, mint az IE6-ot, mert végre kezeli az áttetsző png képeket. Ami design szempontból ugye fontos, igazán szépeket lehet vele alkotni. Olyan problémába ütköztem viszont, amivel eddig nem találkoztam, vagy csak nem figyeltem rá eléggé.

A probléma: az Internet Explorer 7 a háttérnek beállított repeat-y tulajdonságú kép áttetsző png részét randomra megduplázta, mintha többször egymásra tette volna. Ahogy görgettem az oldalt, ez a duplázódás el-elcsúszott, megrövidült, megnagyobbodott, ahogy az neki tetszett. És hogy néz ki? Így:

Bal oldalon lehet látni, hogy mit csinál az IE7, jobb oldalon pedig egy normális böngésző, esetünkben a Mozilla Firefox 3.5.5.

És akkor hogy lehet megoldani?

Hosszú utánaguglizás után megtaláltam a megoldást: arra a div-re (vagy bármi másra), aminek be van állítva az áttetsző png-s háttér, adni kell egy ilyen stílust:

.divclass { background: url(/images/transparent.png) center repeat-y; min-height:0; }

És hogy miért? Az ún “haslayout” probléma miatt, ami a kedvenc böngészőnk, az IE fantasztikus tulajdonsága. És igen, továbbra is ironikusan írom ezt. Aki szeretne további részleteket megtudni erről, itt talál: hasLayout – Webmaster World.com. Aki meg az egyszerű megoldásokat keresi, annak ott a min-height: 0; És élünk tovább boldogan :)

IE6 min-height hack

Zina — Sun, 22 Feb 2009 14:46:09 +0000

A gyengébb browserek sajnos nem ismernek minden CSS utasítást, így például a “kedvenc” böngészőm, az Internet Explorer 6 sem. Most egy olyannal találkoztam, hogy háttér miatt az adott div-nek minimum akkora magasságot szerettem volna admi, mint a háttérkép, és erre való a CSS-ben a min-height funkció, ami sajnos az IE6-nak ismeretlen.

De sebaj, van megoldás, voila:

.divneve { min-height: 100px; height: auto !important; height: 100px; }

Tessék eltenni kedvencekbe, bármikor jól jöhet! :)

CSS technikák – IE Hack

Zina — Fri, 19 Sep 2008 15:06:50 +0000

Sajnos az Internet Explorer nem egy jó böngésző, sokszor okoz fejtörést, mert egyszerűen nem jól értelmez néhány css tag-ot. Ilyenkor csalni kell egy kicsit, nézzük ezeket a technikákat!

Hack a stíluslapon belül

Bár a legjobban használható technika az ún. Conditional Comments, ez sajnos csak a HTML fájlokban használható, a stíluslapon belül nem. Sokan szeretik tisztán tartani a HTML forrást, ílyenkor a stíluslapon belül kell elkövetnünk néhány “csalást”.

.iehackpelda1 { background-color:#b4c842; padding: 2px !important; /* Firefox/Safari */ padding: 10px; /* IE6 */ }

Itt a példa szöveg. Most nézd meg IE6-tal. Lepődj meg :)

A fenti esetben minden böngésző 2 pixelt fog tenni a szöveg köré, az IE6 pedig tizet. Tegyük az !important szót a pontosvessző elé, majd adjuk meg még egyszer ugyanazt a tagot, az már csak az IE-nek fog szólni.

.iehackpelda2 { color:green; /* Zöld szöveg */ } html>body .iehackpelda2 { color:red; /* Piros szöveg, de ezt az IE6 nem látja, zöldnek mutatja */ }

Itt a példa szöveg. Piros. Most nézd meg IE6-tal. Zöld :)

Itt egyszerűen annyit csináltunk, hogy annak a stílusnak, amelyiket nem az IE6-nak szánjuk, elé teszünk egy olyat, hogy html>body. Pont fordított logikával, mint kellene, de ez is működik.

Hack a HTML oldalból

Ha sok olyan formázási elem van, melyet hackelni kell, mert egyszerűen sz@r az IE6 (hála égnek az IE5-tel már nem nagyon kell foglalkozni), vagy egyszerűen elegánsak szeretnénk lenni, akkor készítünk egy külön lapot az IE-nek. A HTML head részébe ültetjük be azt a részt, ami minden egyéb böngészőben a normál stíluslapot hívja meg, IE esetén pedig a neki szántat. Így:

ZINA LEMMIKKI

A kiemelt rész mutatja, hogy kell meghívni az IE böngészőknek szánt stíluslapot. Ha nem az összes IE böngészőben gondolkodunk, akkor lehet specializálni:

Kellemes IE vadászatot!