PIE.htc, border-radius et gradient

**oceane751** · 23/04/2013, 23h07

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** · 24/04/2013, 05h29

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** · 24/04/2013, 14h12

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** · 24/04/2013, 16h31

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** · 25/04/2013, 21h02

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

**rodolphebrd** · 25/04/2013, 22h40

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

**oceane751** · 26/04/2013, 07h46

hey !
avec normalize.css? mais ça va me changer mes css déjà existants!

**rodolphebrd** · 26/04/2013, 08h50

Est-ce que tu as ajouté la ligne suivante aux éléments ciblés:

Code css :

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

1
2
3
4
#myElement {
    ...
    behavior: url(PIE.htc);
}

**oceane751** · 26/04/2013, 09h06

un de mes éléments ciblés est

Code :

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

.les_blocs

dont voici le 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
20
21
22
23
 
.les_blocs {
	width:222px;
	height:262px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ffb42d;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffb42d), to(#ff5b19));
	background: -webkit-linear-gradient(right,#ffb42d, #ff5b19);
	background: -moz-linear-gradient(right, #ffb42d, #ff5b19);
	background: -ms-linear-gradient(right, #ffb42d, #ff5b19);
	background: -o-linear-gradient(right, #ffb42d, #ff5b19);
	background: linear-gradient(right, #ffb42d, #ff5b19);
	-pie-background: linear-gradient(right, #ffb42d, #ff5b19);
	behavior: url(vaurel.free.fr/co/PIE.htc);
	margin-right:30px; 
	float:left;
	padding-top:10px;
	padding-left:25px;
	padding-right:20px;
 
}

donc

Code :

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

.les_blocs

doit être arrondi et doit avoir un gradient

en cherchant, j'ai vu qu'il fallait rajouter

Code :

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

position:relative;

mais ça ne fonctionne pas...

**rodolphebrd** · 27/04/2013, 09h34

Est-ce que tu as la certitude que Pie.htc est détecté correctement.

**oceane751** · 27/04/2013, 23h28

tu peux le savoir comment?

**NoSmoking** · 28/04/2013, 08h07

Bonjour,
et tu n'as rien trouvé dans la documentation officielle?

**rodolphebrd** · 28/04/2013, 10h52

Honnêtement j'ai arrêté de me casser la tête avec IE pour les raisons suivantes:
http://theie9countdown.com/educate-others
http://theie8countdown.com/educate-others
http://theie7countdown.com/educate-others

Encore que IE9 pose moins de problèmes...

**oceane751** · 28/04/2013, 14h07

j'ai déjà vu ce topic
donc j'avais mis

Code :

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

1
2
3
 
behavior: url(/PIE.htc);
position:relative;

mais ça ne marchait pas plus

et le "ctrl +k" ne fonctionne pas chez moi

**oceane751** · 28/04/2013, 16h01

J'ai créé un .htaccess avec

Code :

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

AddType text/x-component .htc

mais ça ne fonctionne pas

j'avais déjà testé en mettant PIE.php
j'ai aussi vidé le cache sous ie...

J'ai aussi mis

Code :

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

<?php header("Content-Type: text/x-component"); ?>

C'est vraiment une méga galère!
et le hic, c'est que quand tu es dans une entreprise, tu es obligé de faire un site compatible ie..

**rodolphebrd** · 28/04/2013, 17h26

Concernant la doc officielle tu as besoin d'aide pour la traduction?

**oceane751** · 28/04/2013, 17h29

suis vraiment désolé mais il est vrai que l'anglais et moi ça fait 10

J'ai tenté de comprendre en faisant ce que j'ai écrit dans mon dernier post...

**rodolphebrd** · 28/04/2013, 19h58

et un test du type:

Code html :

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

<div class="test">test</div>

Code css :

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
.test {
	display: inline-block;
	padding: 10px;
	color: #fff;
	background: #000;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#000) to(#f00));
	background: -webkit-linear-gradient(#000, #f00);
	background:    -moz-linear-gradient(#000, #f00);
	background:     -ms-linear-gradient(#000, #f00);
	background:      -o-linear-gradient(#000, #f00);
	background:         linear-gradient(#000, #f00);
	-pie-background:    linear-gradient(#000, #f00);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.php);
}

**Candygirl** · 28/04/2013, 22h44

Envoyé par oceane751

C'est vraiment une méga galère!
et le hic, c'est que quand tu es dans une entreprise, tu es obligé de faire un site compatible ie..

Un site compatible vieille version d'IE ne signifie pas un site au pixel près identique à d'autres navigateurs.

Une entreprise, ça cherche le meilleur rapport qualité/prix en général, ou alors elle court droit au mur à payer des gens à passer des heures à cherche à avoir des effets graphiques (qui n'apporte rien au contenu) sur des vieux navigateurs en utilisant des technologies modernes

En tant que professionnel, tu leur expliques clairement les choses, que sur IE8, vieux navigateur, les bords de seront pas arrondis et que cela ne nuit pas à l'information. Que vouloir un site moderne rigoureusement identique sur tous les vieux nav ça se paie en heure de développement pour aucun bénéfice.

Au pire, tu utilises une image de fond avec dégradé/arrondi et basta, non ?

De plus, en multipliant les "béquilles" (pour html5, pour les effets css3,...) tu augmentes les risques de problèmes potentiels. D'ailleurs, tu devrais tester ce genre de spécificités sur des navigateurs et OS natifs, pas avec le mode dev. d'IE9 ou 10. Il peut y avoir des particularités et bug qui n'apparaissent pas de cette manière ou, peut-être, de même, le contraire.