28172 sujets

CSS et mise en forme, CSS3

Problème avec Pie CSS3

Bonjour,

Voilà je voudrais utiliser Pie CSS3 afin de rendre mes propriété CSS3 compatible pour IE9-...

J'ai mis en place comment indiquer dans la documentation du site les trois fichiers PIE et la propriété "behavior()" mais ça marche seulement pour certaines balises, c'est un peu aléatoire, comme si des propriétés rentrée en confusion, exemple d'une balise ou aucunes propriété CSS ne marche :


div.article{
	background-image: url(images/bgH4.png); // ne marche pas
	background-repeat: no-repeat; // ne marche pas
	background-position: right bottom; // ne marche pas
	border-bottom: 1px solid #aaa; // ne marche pas
	-webkit-border-radius: 5px 5px 0px 0px; // ne marche pas
	border-radius: 5px 5px 0px 0px; // ne marche pas
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa; // ne marche pas
        box-shadow:  0px 0px 4px 0px #aaaaaa; // ne marche pas
        -pie-box-shadow:  0px 0px 4px 0px #aaaaaa; // ne marche pas
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc); // ne marche pas
}


Exemple ou ça marche :


div.nav{
	background-color: #232323;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
	background: #232323;
	background: -moz-linear-gradient(top, #232323 0%, #000000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#232323), color-stop(100%,#000000));
	background: -webkit-linear-gradient(top, #232323 0%,#000000 100%);
	background: -o-linear-gradient(top, #232323 0%,#000000 100%);
	background: -ms-linear-gradient(top, #232323 0%,#000000 100%);
	background: linear-gradient(to bottom, #232323 0%,#000000 100%);
	-pie-background: linear-gradient(#232323, #000000);
	behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.php);
}


Anthony
Modifié par tonymx15 (20 Sep 2012 - 10:26)
behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc); ne fonctionne pas
behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.php); fonctionne

Qu'en déduis-tu ? Smiley cligne 

div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.php);
}


Ne marche toujours pas...
Bonjour,

Css3 Pie se contente de mimiquer certaines propriétés css3, et ne touche absolument pas aux propriétés css2.

Par conséquent, si aucun style de ta div.article ne fonctionne, le problème ne vient pas de Css3 Pie mais de ton css himself.

Bon courage !
Le problème c'est que si je l'enlève ça marche...

Exemple ou ça marche :


div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;
}


Voilà, là les propriété CSS2 remarche !
Je vois ><

Simple intuition mais as-tu essayé de regrouper tes propriétés background dans une version raccourcie :
background: url(images/bgH4.png) no-repeat right bottom;


Le seul autre élément qui diffère est la bordure : tu peux également tenter de l'enlever pour tester.

J'imagine que tu as déjà parcouru la doc et la FAQ de Css3 Pie ?
Je viens de remarquer quelque chose, comme sa ça marche :


div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;

	/*-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;*/

        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc);
}


Mais du coup aucunes propriété CSS3 ne marchent, si je dé-commente les propriétés CSS3, les propriétés CSS2 ne marchent plus !

Très étrange...
Essaie de voir si ce sont les deux réunies ou bien une seule qui te pose souci.. Peut-être qu'en simplifiant les symptômes tu tomberas sur un bug répertorié.

div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	/*-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;*/
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc);
}


Seulement le border-bottom qui marche...


div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	/*-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;*/
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc);
}


Rien ne marche...


div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	/*-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;
        box-shadow:  0px 0px 4px 0px #aaaaaa;*/
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc);
}


Et tous sauf le CSS3 (box-shadow et border-radius)...
Modifié par tonymx15 (20 Sep 2012 - 14:08)
Étonnant...

Question idiote mais as-tu constaté des différences entre navigateurs ?

Et pourrais-tu tenter sans les deux lignes -webkit- ?
En faites, mon thème marche sur Chrome, Firefox, Safari, Opera... Je voudrais maintenant le rendre compatible sous IE9-... C'est pour ça que je mets en place Pie CSS3...

Mais sinon sous Chrome par exemple tous marche !


div.article{
	background-image: url(images/bgH4.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: 1px solid #aaa;
	/*-webkit-border-radius: 5px 5px 0px 0px;*/
	border-radius: 5px 5px 0px 0px;
	/*-webkit-box-shadow:  0px 0px 4px 0px #aaaaaa;*/
        box-shadow:  0px 0px 4px 0px #aaaaaa;
        behavior: url(wp-content/themes/rugbyclubdeslandes/PIE.htc);
}


Rien ne marche avec ça sous IE8...
As-tu regardé IE7 ?

C'est vraiment très étonnant ! Soit il nous manque des éléments, soit tu as affaire à un bien joli bug !

Désolé de ne pas être plus utiles Smiley ohwell
voici le code que j'ai mis, en plus du border-radius, j'ai mis un effet dégradé, comme me l'indique CSS3Pie.com :

.jourlogo{
	border-bottom:white solid 3px;
	border-left:white solid 3px;
	border-right:white solid 3px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
	background: #fefefe;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fefefe), to(#c6c6c8));
	background: -webkit-linear-gradient(#fefefe, #c6c6c8);
	background: -moz-linear-gradient(#fefefe, #c6c6c8);
	background: -ms-linear-gradient(#fefefe, #c6c6c8);
	background: -o-linear-gradient(#fefefe, #c6c6c8);
	background: linear-gradient(#fefefe, #c6c6c8);
	-pie-background: linear-gradient(#fefefe, #c6c6c8);
	behavior: url(/js/borderradius/PIE.php);
}


ça marche sur tous les navigateurs
sauf sur IE8, rien ne marchait ...
je l'ai mis à jour à IE9... les border-radius marchent... mais pas le dégradé et le shadow...

vous auriez une solution... parce que c'est assez moche...
et sachant que la plupart des IE ne sont pas à jour,
mon site est dégueulasse sur les autres IE...

en meme temps, j'ai regardé sur html5test.com,
firefox : +300pts
chrome : +400pts
IE9 : -200pts
quand vont-ils arreter de persister avec IE ?
Sujet clos
Aller à