Discussion :

[oceane751]

Bonjour à tous !

J'ai ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.les_blocs {
	width:267px;
	height:272px;
	color:#000000;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #ffb12c;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffb12c), to(#ff5d19));
	background: -webkit-linear-gradient(#ffb12c, #ff5d19);
	background: -moz-linear-gradient(#ffb12c, #ff5d19);
	background: -ms-linear-gradient(#ffb12c, #ff5d19);
	background: -o-linear-gradient(#ffb12c, #ff5d19);
	background: linear-gradient(#ffb12c, #ff5d19);
	-pie-background: linear-gradient(#ffb12c, #ff5d19);
	behavior: url(PIE.htc);
	margin-right:30px; 
	float:left;
}

que j'ai pu récupérér là ==> http://css3pie.com/ (pour faire mes arrondis et gradient sous ie)

Sauf que le gradient n'est absolument pas pris en compte sous ie 9, 8 et 7
seul le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 background: #ffb12c;

s'affiche



Bref, je tourne en rond! Et j'ai testé d'autre truc, sans résultat !

Quelqu'un pourrait il m'aider?

Merci

[rodolphebrd]

Bonjour,

Connaissez-vous cet outil:http://www.colorzilla.com/gradient-editor/

Essayez cela:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb12c', endColorstr='#ff5d19',GradientType=0 );

pour IE9 ajouter la classe à l'élément possédant le gradient:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

[oceane751]

Bonjour et merci pour ta réponse !

Je pensais que PIE gérait tout !

donc j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
.les_blocs {
	width:267px;
	height:272px;
	color:#000000;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background: #EEFF99;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
	background: -webkit-linear-gradient(#EEFF99, #66EE33);
	background: -moz-linear-gradient(#EEFF99, #66EE33);
	background: -ms-linear-gradient(#EEFF99, #66EE33);
	background: -o-linear-gradient(#EEFF99, #66EE33);
	background: linear-gradient(#EEFF99, #66EE33);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EEFF99', endColorstr='#66EE33',GradientType=0 );
	-pie-background: linear-gradient(#EEFF99, #66EE33);
	behavior: url(PIE.htc);
	margin-right:30px; 
	float:left;
 
}

et j'ai plus mes arrondis (j'avais déjà testé)

voici le lien (voir le 1er bloc /3 vers le bas : http://vaurel.free.fr/co/co.html)

[oceane751]

j'ai trouvé ça
http://modernizr.com/download/#-bord...mprefixes-load

j'ai donc coché border-radius et gradient mais il ne se passe pas grand chose...
sous ie9 j'ai pas les arrondis!

c'est vraiment la galère ie

[oceane751]

Question bête :
en cliquant sur f12 et quand je choisi sur ie8, faut il être en "mode document:normes" ou pas ?

[rodolphebrd]

Je réponds pour le problème lié au border-radius n'étant pas sous IE.
Désactive PIE et Normalize pour débogguer.