[Résolu] Png me voilà

bon p'tet que j'ai une petite erreur d'espace qui traîne encore dans mon code mais ce sont les png qui refusent de s'afficher comme il faut maintenant sous IE 6 toujours...

donc mon code css:

#pageConteneur{
	position: static;
}
a{
	position: relative;
}
#pageContenu{
	overflow: visible;
	height: 1%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pageContenu_shadowBorders.png', sizingMethod='scale');
	background:none;
}
#ombreBas{
	overflow: visible;
	height: 1%;
	background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/pageContenu_shadowBottom.png", sizingMethod="scale");
}
#footer{
	background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/puceBlanche.png", sizingMethod="crop");
}

la pages est par là :
http://julien.goetz.free.fr/infoclipper/template.html

Merci d'avance...
Modifié par jgoetzfr (16 Oct 2007 - 15:08)

Déjà pour #pageContenu, tu utilises la propriété ilter, sans le f initial (cf. http://julien.goetz.free.fr/infoclipper/infoclipperIE.css ).

oui, j'avais remarqué cette erreur et je l'avais corrigé en local, j'ai remis le fichier css en ligne corrigé, mais la technique pour faire passer les png sur IE6 ne semble toujours pas marcher...

bon un petit up, histoire de voir si une solution miracle ne pointe pas le bout de son nez

Ah ok, j'ai trouvé.

Si on prend div#pageContenu, pour IE6 tu appliques les styles suivants:

/* Via la feuille de styles normale */
div#pageContenu {
	background: url("img/pageContenu_shadowBorders.png") top left repeat-y;
	padding: 0 14px 0px 14px;
	overflow:auto;
}

/* Puis, via la feuille de styles appelée dans un commentaire conditionnel */
#pageContenu{
	overflow: visible;
	height: 1%;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pageContenu_shadowBorders.png', sizingMethod='scale');
	background:none;
}

Les règles CSS qui seront finalement retenues sont:

overflow: auto;
background: url("img/pageContenu_shadowBorders.png") top left repeat-y;
padding: 0 14px 0px 14px;
height: 1%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pageContenu_shadowBorders.png', sizingMethod='scale');

Le problème vient du fait que tu n'as pas tenu compte de la priorité des sélecteurs. div#identifiant a une priorité de 0101, tandis que #identifiant seul a une priorité de 0100. Donc les styles que tu as dans ta feuille de styles globale, où tu utilises un sélecteur plus «fort», restent prioritaires.

Il faudrait utiliser le même sélecteur dans les deux feuilles de styles, voire un sélecteur plus fort dans la seconde (body div#pageConteneur div#ombreBas div#pageContenu : priorité 0304!... bon ok, c'est un peu excessif).

Une petite révision si besoin:
http://openweb.eu.org/articles/cascade_css/

un grand merci à toi Florent !

j'avais sauté cette leçon... damned.
Quel soulagement.

Merci, merci.

Julien
Alsa Powa !