IE8, IE7 opacity (return) .png probleem
10 april 2010 - 13:04   
geplaatst door: DNA
Ik heb nu weer wat aan de hand dat ik nog nooit ben tegen gekomen.

2 afb. vrijstaand gemaakt plus een mooie grijze schaduw achter de afb. geplaatst en wat "krassen" op de afb. gemaakt met de brush-tool dat op gekrast-ijs moet lijken.
Dus sla ik de bestanden op als .png omdat ze ook transparant moeten zijn.

Dit proces herhaal ik nog eens maar dan zonder schaduw en krassen en met wat meer kleur.

Alleen nu ik dit ga testen online zie ik dat alleen in IE8 (*edit en IE7) deze .png bestanden iets heel raars doen.
Overal waar schaduw + de brush-tool is gebruikt wordt dit als ZWART weer gegeven. En omdat ik een hoop krassen heb gemaakt met de brush-tool lijkt het net alsof je monitor stuk/gebarsten is.

Waar kan dit aan liggen heeft het te maken met mijn manier van opslaan?


(Bewerkt door DNA om 17:58, 10-04-2010)

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 15:15    reactie #1
geplaatst door: DNA
Om jullie een beter idee te geven van wat ik bedoel heb ik even ..nou ja even, het kosten me 20 min om uit te vogelen hoe je een simpele screenshot maakt van je browser in Windows XP.

Maar dan heb je ook wat.

***  (dit krijg ik na 1 maal "hover" -links en rechts)

*** (dit krijg ik MET hover dus links is goed)

*** (zo zou het moeten zijn in neutrale stand -zonder hover)

Dit is dus alleen in IE8 alle andere browsers hebben nergens last van.

(Bewerkt door DNA om 17:51, 12-04-2010)

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 15:16    reactie #2
geplaatst door: Spooter
The requested URL was not found on this server.

L'URL que vous avez sollicitée n'a pas été trouvée sur ce serveur.

Die URL, die Sie angefordert haben, wurde nicht auf diesem Server gefunden.

IE8, IE7 opacity (return) .png probleem
10 april 2010 - 17:21    reactie #3
geplaatst door: DNA
@Spooter,

Ik moest even de extensie aanpassen.
Microsoft Paint slaat .jpg bestanden op als .JPG (hoofdletters)

Nu had ik dat ook in de linkjes verwerkt maar dit forum past hoofdletters in linkjes direct aan naar kleine letters.

Als het goed is doen de linkjes het nu wel.

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 17:28    reactie #4
geplaatst door: Sypie
Het is een bekend probleem met IE8 en PNG bestanden: http://realtech.burningbird.net/graphics/css/opacity-returns-ie8
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 18:00    reactie #5
geplaatst door: DNA
Bedankt weer wat leesvoer..

Dit is de eerste keer dat ik dit tegen kom.
En ik gebruik bijna altijd .png bestanden in mijn websites.

Verder kan dit topic denk ik beter richting de categorie webdesign dan grafisch. Het is dus echt een probleem met IE8 en IE7.

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 18:11    reactie #6
geplaatst door: Sypie
Zoals in de link die ik je gaf moet je in je scripts een regeltje toevoegen speciaal voor IE7 / 8. Als je dat gedaan hebt en het werkt nog niet dan is het een "tough one".
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 18:40    reactie #7
geplaatst door: Karlijn
Hoi,

Zet anders onderstaand javascript eens in de < head > --> script hier <-- < /head > van je website.


<script language="JavaScript" type="text/JavaScript">
<!--
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);
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", alphaBackgrounds);
}
function alphaBackgrounds(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (i=0; i<document.all.length; i++){
var bg = document.all[i].currentStyle.backgroundImage;
if (itsAllGood && bg){
if (bg.match(/\.png/i) != null){
var mypng = bg.substring(5,bg.length-2);
document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
document.all[i].style.backgroundImage = "url('images/x.gif')";
}
}
}
}
//-->
</script>

Wel even een transparante pixel 1x1 pixel gif met x.gif als naam in /images of verander dit in het script (het script heeft een transparante pixel nodig).

IE8, IE7 opacity (return) .png probleem
10 april 2010 - 19:12    reactie #8
geplaatst door: DNA
 :happy:  Karlijn.

Leuk dat je meedenkt erg aardig.
Maar ik ben een SEO site aan het bouwen en ik denk niet dat ik punten score met 4kb aan javascript code in mijn head.

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 22:40    reactie #9
geplaatst door: Karlijn
Sla je jouw afbeeldingen wel op in 8-bits en RGB kleuren formaat?
IE8, IE7 opacity (return) .png probleem
10 april 2010 - 22:47    reactie #10
geplaatst door: DNA
? Ik ga eens kijken..

:shutup: Vertel me niet dat dit straks het probleem is.. Zit ik hier bijna een dag aan te werken sla ik het bestand miss verkeerd op.


*edit!!

Yes, ik werk gewoon in RGB op 8bits kleuren 72dpi.
Ik had eens opslaan als .png > none gedaan + .png > interlaced.
Dan krijg je alleen een iets ander effect bij het landen (met streepjes) maar verder niets.

(Bewerkt door DNA om 22:57, 10-04-2010)

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
12 april 2010 - 00:19    reactie #11
geplaatst door: DNA
Even een kleine *dump* sorry.

Maar ik zit nog steeds met dit Internet Explorer probleem.
:boring:


Ik heb al uitgesloten dat het een .png probleem is.
Bestanden heb ik op alle verschillende manieren opgeslagen.
Save for the web > png8 en png 24 maar niets wil helpen.

Ook als ik in IE direct naar de image toe surf krijg ik de afb. gewoon goed te zien dus het gaat hier echt om een probleem bij het switchen van afb. 1 naar afb. 2 en terug.
Op één of andere manier kan IE niet omgaan met deze switch en vraag me dus echt af waarom.

Zijn er ervaren webdesigners die weten wat hier mis gaat?

***

(Bewerkt door DNA om 17:52, 12-04-2010)

Apple = Click, Boom, Amazing!
IE8, IE7 opacity (return) .png probleem
12 april 2010 - 00:44    reactie #12
geplaatst door: G Force
Ik denk dat het normaal wel goed gaat met een standaard hover maar omdat je een stukje javascript (i.c.m. jquery?) gebruikt om de hover te vertragen loopt IE daar op vast.
Ik neem aan dat je dit voor een reden gebruikt dus moet je voor IE, zoals zo vaak, weer een omweg zoeken. :thumbs-down:

Eerst kun je kijken in IE8/IE7 of de volgende link werkt: http://www.visibilityinherit.com/code/jquery-animated-hover-demo.php
Ik heb nu geen IE bij de hand en kan niet zien of het daar wel echt werkt.

Indien het werkt kun je zien hoe je het moet toepassen: http://www.visibilityinherit.com/code/jquery-animated-hover.php
Werkt met jquery dus is ook voor jouw site goed in te passen. Daar ligt de oorzaak ook, de combinatie IE, PNG en jquery. Hopelijk gaat het voor jouw probleem ook werken. Succes ermee.

PowerMac G4 Cube 450 Mhz, 768 MB RAM - iBook G4 14", 1 Ghz, 1.12 GB RAM - iMac 27" i5 2.66 Ghz Quad Core, 4 GB RAM.
iPod 4G, 40GB, iPod Shuffle 2G, 1GB.
"Windows is a legacy OS, We don't have legacy support." - Cameron Esfahani
IE8, IE7 opacity (return) .png probleem
12 april 2010 - 02:17    reactie #13
geplaatst door: DNA
Okay..

Bedankt voor de link maar daar maak ik het alleen nog maar moeilijker mee.

Ik start morgen opnieuw en ga wat anders maken.
Je link werkte wel in IE  :thumbs-up:

Heb het helemaal gehad met deze onzin voor nu.

** edit heb het opgelost door een simpele  "onmouseover" erin te zetten.
Krijg je niet het mooiste effect mee maar het werkt wel nog het beste en eenvoudigste van alles.
En ook in IE.

(Bewerkt door DNA om 17:54, 12-04-2010)

Apple = Click, Boom, Amazing!