28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Devant mes recherches non fructueuses je viens demander votre aide.
Existe-il une méthode qui gère correctement les PNG transparents sous IE 6 ?

Je veux dire par là : si je mets un background:url(images/footer.png) no-repeat; dans mon css, le png sera bien géré, ou même si je mes un png dans mon html en tant qu'image, la transparence soit elle aussi gérée !

Jusqu'à là, j'ai réussi Smiley cligne

Cependant,
J'ai une propriété dans mon css :
background:url(images/menu.png) repeat-y;

Avec tous les scipts javascript, hack css ou autre je n'ai pas réussi à faire fonctionner le repeat-y Smiley decu

Quelqu'un à une idée ?


Merci d'avance.
Tu ne peux pas.
Le filtre AlphaImageLoader utilisé pour rendre la transparence à un png n'accepte pas de repeat comme argument.
Voir : http://msdn2.microsoft.com/en-us/library/ms532920.aspx

A noter qu'il n'existe AUCUNE technique autre que l'utilisation de ce filtre, quoiqu'on puisse (souvent) lire. Les lourds scripts à la /IE7/ de Edwards ne sont là que pour aider ce qui ne maîtrisent pas CSS.
L'attribut sizingMethod du filtre AlphaImageLoader ne comporte que deux valeurs possibles : crop et scale, donc soit mise à l'échelle (scale) soit taille réelle (crop). Mais avec la valeur scale et une image d'1 pixel de largeur ou de hauteur pour faire une ombre sur un cadre par exemple s'avère simuler un repeat-x ou y avec perfection. Mais si ton png est un fond de plusieurs pixels de large et de hauteur (du type texture), tu vas pour retrouver avec un résultat hideux... Mais il y a toujours moyen de s'arranger en contournant le problème Smiley murf
Modifié par noklio (01 Sep 2007 - 16:40)
Oh tiens noklio Smiley smile J'adore ton portfolio et tes créations !

J'ai réussi Smiley cligne
Dans mon html :
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<link rel="stylesheet" type="text/css" href="bug-ie-png.css">
<![endif]-->


Et dans le css supplémentaire :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/test.png');
	background-image:none;


Et ca passe NICKEL Smiley cligne