Interprétrer du png sous IE6 avec CSS

Fermé

flibouk - 31 mars 2010 à 14:21
flashrom - 5 avril 2011 à 18:17

Bonjour,
voila mon probleme, j'ai développé un site internet qui marche tres bien. Mais je viens de m'apercevoir que sur les version d'internet explorer 6 c'est affreux en effet il ne gère pas la transparence de mes images png et me décale certaines image.
Comment y remédier ?

Voici par exemple le code d'une image dans ma feuille de style :
a#logo_gauche {
display: block;
position: absolute;
width: 555px;
height: 105px;
top: 10px;
left: 0px;
background: url(images/newlogo.png) no-repeat;
}

Merci par avance de votre aide.

A voir également:

Interprétrer du png sous IE6 avec CSS
Webp to png - Guide
Png to pdf - Télécharger - PDF
Ai png enlarger - Télécharger - Retouche d'image
Logiciel png - Télécharger - Photo & Graphisme
Css premier plan ✓ - Forum CSS

3 réponses

Réponse 1 / 3

Lesplusbeauxdictons Messages postés 369 Date d'inscription lundi 27 décembre 2010 Statut Membre Dernière intervention 6 septembre 2014 43
2 avril 2011 à 20:40

Bonsoir. Télécharge le SP3 de XP :
http://www.microsoft.com/downloads/fr-fr/details.aspx?FamilyID=2fcde6ce-b5fb-4488-8c50-fe22559d164e

Puis IE8 pour XP :
http://www.microsoft.com/downloads/fr-fr/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b

A.Nonymous
2 avril 2011 à 21:04

Cela ne répond pas vraiment à son problème.

Lesplusbeauxdictons Messages postés 369 Date d'inscription lundi 27 décembre 2010 Statut Membre Dernière intervention 6 septembre 2014 43
2 avril 2011 à 22:53

Si, car le fait d'installer IE9 supprimera ces bugs... IE9 est beaucoup plus compatible avec les CSS et autres standards du web...

Réponse 2 / 3

A.Nonymous
2 avril 2011 à 21:09

IE6 a ses bugs ... et ses contournements.

Par exemple :
http://jquery.andreaseberhard.de/pngFix/
Ou
http://www.twinhelix.com/css/iepngfix/

Cependant, il est vrai que IE6 est un navigateur en voie de disparition.

Réponse 3 / 3

flashrom
5 avril 2011 à 18:17

le probleme c'est que ie6 est encore present sur plusieur ordinateurs du monde et il faut toujours qu'un site sois compatible avec ce dernier.

voila je te donne ici un script JS à mettre entre <head></head> et qui permet à ie6 de gerer la transparence des PNG et aussi les png donner comme background sur le fichier css.

bn chance.

le code:

//**********************
<script language="JavaScript" type="text/JavaScript">

/* ############## Configuration ############## */

// Chemin complet sans le nom de domaine de la page HTML vers les images appelées en CSS
var ImgsPath = "images/";

// Gestion des exceptions
var Exceptions = new Array();
Exceptions[0] = "image-sans-transparence.png";
Exceptions[1] = "image-autre.png";
/*
Exceptions[2] = "";
etc...
*/

/* ############## Fin de Configuration ############## */

// Execution au chargement de la page
window.onload = function() {
PngFixImg();
PngFixBkground();
}

// Mise en transparence des <img /> PNG
function PngFixImg() {
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
}
//if
}//for
}//if
}//function

// Mise en transparence des images PNG en background CSS
function PngFixBkground() {

// Tableau des feuilles de styles
var StyleSheets = document.styleSheets;

// Boucle sur les feuilles de styles
for(i=0; i<StyleSheets.length; i++)
{
// Si il s'agit d'Internet Explorer
if(StyleSheets[i].rules)
{
Rules = StyleSheets[i].rules;

// Boucle sur les règles de la feuille de style
for(j=0; j<Rules.length; j++)
{
// Si la règle contient une propriété "background"
if(
(Rules[j].style.background) ||
(Rules[j].style.backgroundImage) ||
(Rules[j].style.backgroundRepeat)
)
{
// Récupération des règles
if(Rules[j].style.background)
{
BkgroundImg = Rules[j].style.background.match('[a-z0-9_-]*\.png');
BkgroundRepeat = Rules[j].style.background.match('repeat|repeat\-x|repeat\-y|no\-repeat');
}
else
{
BkgroundImg = Rules[j].style.backgroundImage.match('[a-z0-9_-]*\.png');
BkgroundRepeat = Rules[j].style.backgroundRepeat;
}
// Prise en compte des exceptions
var regex = new RegExp(BkgroundImg, 'g');
var yatil = regex.test(Exceptions);

// Si l'image de fond est un PNG
if(
(BkgroundImg != null) &&
(yatil == false)
)
{
// Détermination du sizingMethod suivant la méthode de repétition de l'image
if(BkgroundRepeat != null)
{
// Cas "Etirer"
if(
(BkgroundRepeat == "repeat") ||
(BkgroundRepeat == "repeat-x") ||
(BkgroundRepeat == "repeat-y")
)
{sizingMethod = 'scale';}
// Cas "Rogner"
else
{sizingMethod = 'crop';}
}

// Retrait de l'image de fond
Rules[j].style.backgroundImage = "none";

// Application du filtre
Rules[j].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + ImgsPath + BkgroundImg + "', sizingMethod='" + sizingMethod + "')";

} // if

} // if

} // for

} // if

} // for

}

</script>

Discussions similaires

[Photoshop] Fichier en PNG qui ne s'ouvre pas

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

[CSS] Forcé retour à la ligne

HTML - définir taille bouton