WN - PNG24 som bakgrund

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - PNG24 som bakgrund (https://www.wn.se/forum/showthread.php?t=25927)

qson	2007-12-31 12:45

Hej!
Jag skall göra en design till min webbsida, och känner att jag behöver använda png24 (alpha-transparent) för att få det bra. Problemet är ju att IE6 inte gillar det.
Jag har tidigare gjort en sajt som var på detta viset, med ful-hack med filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader och det funkade bra (tror jag).
Iallafall i min IE6. PRoblemet är att W3C:s CSS-validering får krupp...
Tänkte en gång även ha ett alternativt stylesheet för IE6, så den vanliga CSSen validerar.

Vad tror ni, är det ok att göra som på denna sida:
http://www.furholmen.com/oceanrace
( länk til CSS-filen: http://www.furholmen.com/assets/temp.../oceanrace.css )

Lite statistik från Google Analytics: (Min sajt som jag skall ha ny design till...)
Webbläsarhistorik:
Internet Explorer 59% (IE7 60%, IE6 40%)
Firefox 32 %
etc...

mr_lundis

2007-12-31 16:02

Skapa en separat css fil och placera alla dina ful-hack i den, för så vitt jag vet måste du använda AlphaImageLoader för att fixa aplha-transparens i IE 6.

Sen försår jag inte riktigt vad du syftar på med den filen du länkar till.

znap	2007-12-31 17:13

Varför bry sig om att css inte validerar fullt ut :) Jag ser då inte javascript expressions i css som något fulhack

svedlund.net

2007-12-31 17:20

Du kan alltid testa denna lösning:

http://www.twinhelix.com/css/iepngfix/

Vet dock inte om koden validerar.

studiox

2008-01-01 14:19

Citat:

Originally posted by svedlund.net@Dec 31 2007, 18:20
Du kan alltid testa denna lösning:
http://www.twinhelix.com/css/iepngfix/
Vet dock inte om koden validerar.

Jo det gör den. jag använde den tidigare men det är lite krångligt. Så jag sket i IE6 :)

qson	2008-01-02 13:59

Tack så mycket. Skall kolla på dessa lösningar.
Filen jag länkade till var ett exempel på hur jag hade löst det på en annan sajt, och undrade vad ni ansåg om att lägga in fulhacken direkt i css-filen (ligger först en background: och sedan en filter: i samma klammer.

coredev

2008-01-02 14:04

Hmm.. Varför klarar du dig inte med en transparent GIF?

htiawe

2008-01-02 14:06

PNG är ju bättre då GIF bara tillåter 256 färger, om det nu är det som hindrar honom.

qson	2008-01-02 23:39

Det som hindrar mig är att GIF eller 8bit PNG bara klarar "transparens" som 0 eller 100%. PNG24 har ju en alpha-kanal (snygga övertoningar?)

coredev

2008-01-03 09:44

Okidoki.. :)

Men ärligt talat så gör du nog bäst i att använda en enklare teknik tillsvidare. En knapp majoritet av användarna på din sida kan idag ändå inte nyttja PNG24, och fukhack i CSS:en / Javascript kommer bara att leda till att du får problem i framtiden.

martine

2008-01-03 16:38

Citat:

Originally posted by coredev@Jan 3 2008, 10:44
Okidoki.. :)

Men ärligt talat så gör du nog bäst i att använda en enklare teknik tillsvidare. En knapp majoritet av användarna på din sida kan idag ändå inte nyttja PNG24, och fukhack i CSS:en / Javascript kommer bara att leda till att du får problem i framtiden.

Skulle nog säga det omvända. En lite rad i css:en med * html t.ex. är lätt att se och påverkar inte andra webbläsare än IE6. Det är verkligen tid att börja använda mer avancerade designer, t.ex. png med alfa-kanal, det har ju varit tillgängligt sedan början av 2000-talet i alla webläsare utom IE6. Jag skulle nog tro att IE6 snabbt kommer bli historia och de få som av någon outgrundlig anledning håller sig kvar vid IE6 störs säkerligen inte av en misslyckad png.

CodeBox

2008-01-03 17:54

Här har du ett javascript som fixar till det, bara lägga till scriptet längst upp på sidan.

Kod:



  /*

  Correctly handle PNG transparency in Win IE 5.5 & 6.

  http://homepage.ntlworld.com/bobosola Updated 18-Jan-2006.

  */

  var arVersion = navigator.appVersion.split("MSIE")

  var version = parseFloat(arVersion[1])



  if ((version >= 5.5) && (document.body.filters)) 

  {

    for(var i=0; i<document.images.length; i++)

    {

     var img = document.images[i]

     var imgName = img.src.toUpperCase()

     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

     {

       var imgID = (img.id) ? "id='" + img.id + "' " : ""

       var imgClass = (img.className) ? "class='" + img.className + "' " : ""

       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

       var imgStyle = "display:inline-block;" + img.style.cssText 

       if (img.align == "left") imgStyle = "float:left;" + imgStyle

       if (img.align == "right") imgStyle = "float:right;" + imgStyle

       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

       var strNewHTML = "<span " + imgID + imgClass + imgTitle

       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 

       img.outerHTML = strNewHTML

       i = i-1

     }

    }

  }

mr_lundis

2008-01-04 16:11

Citat:

Ursprungligen postat av CodeBox

Här har du ett javascript som fixar till det, bara lägga till scriptet längst upp på sidan.[...]

PNGFix javascriptet fungerar inte på CSS bakgrunder utan endast img-element.

Citat:

Ursprungligen postat av qson

Bakground: none; används för att undvika krockar mellan den riktiga bakgrunden och det lager med alpha-transparens som AlphaImageLoader skapar. Att placera dessa i samma klammer är att rekommendera då de "behöver" varandra för att alpha-transparensen ska fungera. Men separera övrig CSS och dina "hack", det gör saker mycket enklare i framtiden.

qson	2008-01-04 17:04

Tack mr_lundis! Skall genast ordna detta.

En ny fråga: Uppfattar IE7 !important, eller kommer den att tolka den senast deklararade precis som IE6?
Har bara IE6 på datorn, men skall testa med annan dator nån dag.

martine

2008-01-04 17:11

Citat:

Originally posted by qson@Jan 4 2008, 18:04
En ny fråga: Uppfattar IE7 !important, eller kommer den att tolka den senast deklararade precis som IE6?

IE7 förstår !important

Alla tider är GMT +2. Klockan är nu 05:43.