png transparantie probleem

[Mythix]

ik ben een website aan het maken waarin een tabel met drop shadow in voorkomt, over een achtergrondafbeelding. ik heb de drop shadow dus opgeslagen in photoshop als transparante png-24.
in mijn browsers, IE7 en FF2 op win Vista en FF/IE6 op XP werken de png afbeeldingen goed.

bij de klant blijkt er een blauwe rand rond de tabel te zitten ipv een transparante drop shadow. welk OS/browser er op hun systeem bevindt weet ik nog niet. ik heb al naar verschillende oplossingen gezocht en heb verschillende dingen gevonden zoals CSS voor IE6 en dergelijke, maar sinds het hier met IE6 wel werkt denkt ik dat het miss ergens anders ligt. Iemand een id wat er fout gaat?

dit is de betreffende tabel met drop shadow (contact gegevens)
http://www.colourcircus.com/test/index.php?p=help

[Jorik90]

Volgens mij is het probleem dat een aantal wat oudere browsers geen transparante PNG's ondersteunen. Als ik het hier in Internet Explorer 6 bekijk, dan zie ik i.p.v. de schaduw een grijs vlak, idem in Internet Explorer 5.5. Volgens mij is het mogelijk het probleem te omzeilen, door een bepaalde javascript/css truuk, maar dit zou je even moet uitzoeken op Google.
Als je het zelf wilt testen in IE 6/5.5 of ouder, kun je eens kijken naar MultipleIE's..
Zie misschien ook dit en dit.
Het werkt hier trouwens wel gewoon in Firefox, het probleem ligt gewoon bij de oudere browsers en hun omgang met transparante PNG's.

[ Voor 24% gewijzigd door Jorik90 op 25-08-2007 23:18 . Reden: toevoeging ]

[ODF]

Ik heb nog even getest of het misschien aan het verschil tussen 32 en 16 Bit kleuren kon liggen maar ik zie geen verschil. Misschien is hun videokaart driver corrupt.
Bij mij onder XP met IE6 en FF zie ik gewoon een transparante PNG met dropshadow. Naast een javascript truuk kun je er ook een GIF van maken.

[ Voor 30% gewijzigd door ODF op 25-08-2007 23:20 ]

[Jorik90]

Een gif is van veel mindere kwaliteit, vandaar waarschijnlijk de afweging voor een PNG-afbeelding..

[ODF]

Ja, PNG is kwalitatief beter dan GIF maar compatible in elke browser hoe oud ook en dat is belangrijk.
Ik zou zelf voor een javascript/css hack gaan.

[Mythix]

Ik denk ook dat de hanck de beste oplossing is, hier had ik eerder ook al naar gekeken, maar kon er niet zo goed aan uit.

code:

<title>PNG transparantie</title>

<style>
    body{
        background:url(bg.gif) repeat;
        text-align:center;
    }

    /* alle browsers */
    div{
        width:600px;
        height:360px;
        margin:100px auto;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparant.png');
    }

    /* moderne browsers gewone PNG */
    body>div{
        background:url('transparant.png') no-repeat
    }
</style>

<div></div>

Dit is een kack voor een div, maar hoe krijg ik deze hack nu in m'n tabellen? en moe tik dit voor elke afbeelding appart doen?

[wica]

Je kan vermoed ik voor deze hack ook dit doen

code:

#idvandedivvoorhetplaatje {
        width:600px;
        height:360px;
        margin:100px auto;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparant.png');
    }
}

En deze div in de table zetten?

[R2D2]

Ik had hetzelfde probleem en heb het anders opgelost, een png fix door middel van javascript voor alle IE browsers lager dan IE7

In je html file het volgende,

code:

<!--[if lt IE 7]>
<script type="text/javascript" src="../opacity.js"></script>
<![endif]-->

En dan het javascriptje,

code:

var bgsleight   = function() {
    
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            }
        }
    }
    
    function fnLoadPngs() {
        var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
        var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
        for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
            if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
                fnFixPng(obj);
                obj.attachEvent("onpropertychange", fnPropertyChanged);
            }
        }
    }

    function fnPropertyChanged() {
        if (window.event.propertyName == "style.backgroundImage") {
            var el = window.event.srcElement;
            if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
                var bg  = el.currentStyle.backgroundImage;
                var src = bg.substring(5,bg.length-2);
                el.filters.item(0).src = src;
                el.style.backgroundImage = "url(x.gif)";
            }
        }
    }

    function fnFixPng(obj) {
        var bg  = obj.currentStyle.backgroundImage;
        var src = bg.substring(5,bg.length-2);
        obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
        obj.style.backgroundImage = "url(x.gif)";
    }
    
    
    
    
    return {
        
        init: function() {
            
            if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
                addLoadEvent(fnLoadPngs);
            }
            
        }
    }
    
}();

bgsleight.init();

Works like an charm, alle png ondersteunende browsers laten het door het conditional stukje helemaal links liggen en alles lager dan IE7 geeft de png files correct weer. Er is 1 maar, wanneer iemand zijn javascript uit heeft staan werkt het niet.

Nadeel van de filter methode in de CSS is dat ie niet altijd even lekker werkt, althans ik kreeg hem in sommige gevallen met IE niet werkend terwijl het javascript tot op heden een 100% score van werking geeft.

[ Voor 4% gewijzigd door R2D2 op 26-08-2007 02:09 ]

[Mythix]

ok bedankt, klinkt goed, hopelijk doet dit het ook

ik heb de link in de body gezet, kan er iemand bij wie het niet werkte even testen of het nu wel correct werkt?

Heb de miltuIE op xp geinstalleerd en het script werkt perfect!

bedankt Reind

[ Voor 21% gewijzigd door Mythix op 26-08-2007 03:06 . Reden: Nagekeken en geconfirmeerd ]

[akaIDIOT]

Wellicht dat het je voor deze website niet zo heel veel helpt, maar een truc die bij altijd heel goed werkt is het aanpassen van de 'background-chunk' in de png. Op deze manier vult IE6 (en ik neem aan ook andere browsers die de alpha-channels niet snappen) alles wat transparant zou moeten zijn op met de achtergrondkleur, alleen dit maal wel de transparantie in het achterhoofd houdende (vraag me niet hoe het precies werkt ).

Een programma om de genoemde chunks mee te editen is TweakPNG. De offi site is op moment van typen offline, maar hij staat vaker op google .

In dit progje kan je onzin als text-chunks en pixelprofiles er uit slopen (scheelt je op kleine plaatjes soms de helft aan bestandsgrootte) en een background-chunk toevoegen.

Ik hoop dat jij en andere tweakers hier iets mee kunnen . Onthoud wel dat het dus alleen werkt als de png boven een egale achtergrond zit...

[R2D2]

Mythix schreef op zondag 26 augustus 2007 @ 02:54:
bedankt Reind

No thanx needed, ik kwam tot deze oplossing na een search maar heb hem iets verfijnd.

Wanneer je namelijk het script gewoon zo include gaat IE7 de letters een beetje crispy weer geven aangezien er een filter word gebruikt en dat geeft weer gedonder met cleartype. Als je dus IE7 niets laat doen met het script heb je dat probleem niet MAAR houd je dat alleen in IE6 (letters zien er dan zo uit als wanneer cleartype uit staat op een pc). Voor dat probleem heb ik nog niets weten te vinden maar IE6 is langzaam maar zeker aan het uitsterven dus met dat kleine bugje in het geheel is naar mijn mening wel te leven. Als mensen het bugje uberhaupt al tegen komen want wanneer je cleartype niet aan hebt staan in windows zal iemand het natuurlijk niet opvallen.

Lijkt mij dus de mooiste en beste oplossing om het op deze manier te doen.