Alphatransparent png'tjes in IE

[Verwijderd]

Hey,

Ik ben nu bezig met een webpagina voor mijn studievereniging, je kunt hem hier zien:
http://www2.severjanin.tvreclames.nl

In Mozilla geen probleem, maar in IE is de PNG achtergrond van de "content" layer niet semitransparant. Ik heb wat gezocht op internet en vanalles geprobeerd met rare IE filters e.d., maar het enige resultaat daarvan is, dat die layer nu gewoon helemaal geen achtergrond meer heeft... Ik kom er werkelijk niet uit. Ik doe alles precies zoals de websites zeggen, maar er gebeurt niets...

Hier het stukje CSS:

code:

#content {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pix.png',sizingMethod='scale');
  border: 1px solid black;
  padding: 1em;
}
#content[id] {
  background-image: url(images/pix.png);
}

images/pix.png is een halftransparante pixel dus...

Ik hoop dat iemand van jullie me hiermee kan helpen

[Verwijderd]

Ik gebruik het volgende en dat werkt onder IE.

code:

#image {
    background: url(image.png) no-repeat !important; background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='image.png');
    }

[Verwijderd]

Verwijderd schreef op woensdag 11 oktober 2006 @ 03:10:
Ik gebruik het volgende en dat werkt onder IE.

code:

#image {
    background: url(image.png) no-repeat !important; background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='image.png');
    }

bij mij werkt het niet

[OkkE]

Volgens mij werkte die filter ook alleen wanneer de afbeelding niet als background-image stond, maar als gewone afbeelding.

Misschien dat je het kunt oplossen met de Opacity filter? Of anders vals spelen, door een 2x2 pixel gif te maken, waarbij de pixel links boven en rechts onder wit zijn, en de andere twee volledig transparant.

[frickY]

Klopt. Werkt alleen voor de img-tag.
Zet je achtergrondje dus in een img tag met id="achtergrond", en in je stylesheet;

Cascading Stylesheet:

img#achtergrond {position: absolute; top: 0px; left: 0px; z-index: -1}

[skabouter]

Misschien een domme vraag hoor, maar waarom gebruik je een afbeelding en geen kleur en (zoals OkkE al aangaf met de opacity filter optie transparantie toevoegen?

[Fuzzillogic]

Er zijn behaviours beschikbaar voor dit belachelijke hiaat in IE6. Of gebruik het IE7-script van Edwards. Of steek een middelvinger op naar IE6, want in IE7 is het eindelijk gefixt

Hoe dan ook, ga je code niet vervuilen met IE6-only dingen; gebruik conditional comments.

[ Voor 20% gewijzigd door Fuzzillogic op 11-10-2006 09:25 ]

[Verwijderd]

frickY schreef op woensdag 11 oktober 2006 @ 09:10:
Klopt. Werkt alleen voor de img-tag.
Zet je achtergrondje dus in een img tag met id="achtergrond", en in je stylesheet;

Cascading Stylesheet:

img#achtergrond {position: absolute; top: 0px; left: 0px; z-index: -1}

Toch heb ik een lege div die alleen maar een id heeft. Vervolgens wordt het plaatje er door de CSS ingezet als background-image met transparantie onder IE. Ben lang op zoek geweest naar een oplossing voor de background-images maar dit werkt gelukkig wel. Het komt van een website, ik weet alleen niet meer zo welke.

[Setragasj]

Sinds ik dit artikel gelezen heb, gebruik ik veel vaker png'tjes op mijn website.
Enige nadeel is dat javascript aan moet staan, maar daar zou je een <noscript> voor kunnen toevoegen met een niet-png ofzo.

[njitter]

Ik gebruik dit in de body:

code:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->

En JS file:

code:

// Correctly handle PNG transparency in Win IE 5.5 or higher.

function correctPNG() 
   {
   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
         }
      }
   }
window.attachEvent("onload", correctPNG);

Werkt prima..

[Fuzzillogic]

Ipv dat gehannes met die stukjes Javascript die niet voor bijv. CSS backgrounds werken, gebruik IEpngFix. Veel makkelijker en eleganter. <img /> gebruiken als achtergrond is sowieso niet zo netjes (ja ik doe het zelf ook, me bad, ik weet het.)

[KroeT]

Ik zit nu op m'n werk, dus ik kan die IEpngFix niet direct uitproberen, maar zodra ik straks thuis kom (al is het 4 uur 's ochtends!) ga ik 'm uitproberen. Ik heb gisteren en eergisteren de hele dag gek*t met Photoshop om dan maar wat zooi niet transparant exact passend te maken op de site zodat het niet opviel dat het niet transparant was. Natuurlijk heb ik ook al die suffe scriptjes geprobeerd, maar het betrof UDM4 (http://www.udm4.com) waardoor het ging om een png als background.

Hopie op Nexxennium!

[MBV]

kijk eens op mijn site, www.mvdvlist.nl. Daar werkt het, mag jij uitvissen hoe . Zit in de .htc file, en de CSS.

[_Thanatos_]

PNG Behavior heeft mij nog nooit in de steek gelaten. Een regeltje CSS moet je er zelf bij maken, en IE 5.5+ geeft vziw geen problemen meer met PNG.

[MBV]

mij wel, hij pakte standaard het verkeerde soort resize ofzo. Weet het niet meer precies, maar mijn achtergronden waren een beetje fucked up daardoor. Was geen ingrijpende wijziging overigens..