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

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 :)

Átlátszó PNG IE6-ban

Zina — Sun, 05 Oct 2008 14:54:27 +0000

Na most érdekes a cím, mert ugye az IE6 nem támogatja a PNG képfájlok átlátszóságát, szürke hátteret tesz oda, ahová pont nem kellene semmi. Képen példa:

Csúnya, nagyon. De hála égnek van megoldás!

Mégpedig az IE5.5+ PNG Alpha Fix nevű kis programocska. Első lépésként töltsd le (zip, 37kb). Van benne egy demo oldal is, de ez minket most nem érdekel. Ami kell belőle, az 2 db fájl.

Az egyik a iepngfix.htc nevű, melynek feladata, hogy áttetszővé teszi a png fájlokat, technikája, hogy a filterekkel szórakozik egyet. Segítségképp kell neki a blank.gif nevű fájl, ami egy egyszerű üres gif kép (hála égnek a gif ürességét azért érti az IE).

Mentsd el a képet és a HTC fájlt valahová, majd nyisd meg a css stíluslapodat, és tedd bele a következő sort:

*{ behavior: url(http://oldaladneve.hu/program/iepngfix.htc) }

A lényeg, hogy ne relatíven hivatkozz a fájlra, mert nem a css stíluslaphoz viszonyított útvonalat figyeli, hanem azét a fájlét, amelyik meghívta a css lapot.

Ha ezt mind megcsináltad, és ráfrissítettél az IE-ben, akkor látnod kell a csodát: eltűnt az a csúnya szürke keret :)

Ha gondod akad, akkor nézd meg a szerző lapján a GYIK-et.

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!

Google Chrome böngésző BÉTA

Zina — Thu, 04 Sep 2008 21:41:39 +0000

Nem is emlékszem, mikor volt utoljára olyan, hogy minden második blogger egy témáról ír napokig. Beszállnék én is. A téma pedig nem már, mint a Google böngészője. Mivel annyi helyen lehet már róla olvasni, így én nem is mennék bele túlságosan a részletekbe, egyszerűen csak leírom, hogy IMÁDOM!

Én, aki olyan hű vagyok (voltam?) a Firefoxhoz, mindenkinek hirdetem az igét, hogy azonnal váltson tűzrókára, és akkor jön ez… Beleszerettem.

Gyors, okos, szép, felhasználóbarát, és olyan apró kedves funkciói vannak, hogy kb. 3 perc alatt belopta magát a szívembe.

Bátran ajánlom mindenkinek, hogy ha másért nem, legalább próbálja ki.

ITT TESSÉK LETÖLTENI!

A kedvencem benne, hogy nincs felső menüsor, így sokkal nagyobb nézetben lehet a neten szörfölni. Amikor telepítettem, minden előzményt és beállítást átemelt a Firefoxból, így nem kellett újra a kedvenceim rendezésével bíbelődnöm.

Legyen itt néhány nézet belőle, először a lemmikki.hu:

A beépített Google keresőnek nincs külön felülete, a címsorba írva találunk egy hivatkozást: Keresés a Google keresővel…

Amikor új lapot nyitunk, akkor felhozza kis előképekkel a legtöbbet látogatott oldalainkat. EZ A KEDVENCEM! Amikor ezt megláttam, itt szerettem bele igazán.

Amikor épp letöltünk egy fájt, azt is igazán elegánsan kezeli a bal alsó sarokban, amikor kész, akkor pedig egy elegáns animációval ér véget. A letöltéseket külön oldalon tudjuk áttekinteni, mely igazán elegánsan jelenik meg:

Az előzmények áttekintése szintén hasonlóan kellemes kép:

Fejlesztőknek még egy kis plusz: a forráskód nem csak egyszerű txt, hanem szépen formázott, aktív hivatkozásokkal teli oldal:

IE5 és IE6 teszt, ha IE7 van a gépen

Zina — Tue, 12 Aug 2008 10:35:21 +0000

A kérdés akkor vetődik fel leginkább, mikor már az IE7 van installálva a gépre, és köztudott, hogy nem lehet több IE verziót tenni a gépünkre. Találtam egy nagyszerű programot (ingyenes teljesen) a DebugBar oldalán, mellyel egyszerűen megtekinthetjük az oldalunkat IE5.5, IE6, IE7 és IE8 beta verziókban, mindezt úgy, ha az IE7 van telepítve (Vista usereknél mindenképp).

Mondjuk az én oldalam látogatói közel 70%-ban a Firefoxot használják, tízből ketten még mindig IE6-tal tekintenek meg. Hasonló helyzetben sokan vannak, és sokaknak is ajánlom!

IETester v0.2.2 (23.8MB)

Emellett azért legyen még egy hasznos dolog:
Mindenki használjon Firefoxot!