PIE.htc, border-radius et gradient

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour à tous !

J'ai ce code :
Code:

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:

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 ;)

24/04/2013, 05h29
rodolphebrd
Bonjour,

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

Essayez cela:

Code:

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

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

1 2 3 4 5 6 7

Bonjour et merci pour ta réponse !

Je pensais que PIE gérait tout !

donc j'ai fait :

Code:

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)

24/04/2013, 16h31
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 :?
25/04/2013, 21h02
oceane751

Question bête :
en cliquant sur f12 et quand je choisi sur ie8, faut il être en "mode document:normes" ou pas ?
25/04/2013, 22h40
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.
26/04/2013, 07h46
oceane751

hey !
avec normalize.css? mais ça va me changer mes css déjà existants!
26/04/2013, 08h50
rodolphebrd
Est-ce que tu as ajouté la ligne suivante aux éléments ciblés:
Code:

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

un de mes éléments ciblés est

Code:

.les_blocs

dont voici le code :

Code:

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:

.les_blocs

doit être arrondi et doit avoir un gradient

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

Code:

position:relative;

mais ça ne fonctionne pas...

27/04/2013, 09h34
rodolphebrd

Est-ce que tu as la certitude que Pie.htc est détecté correctement.
27/04/2013, 23h28
oceane751

tu peux le savoir comment?
28/04/2013, 08h07
NoSmoking

Bonjour,
et tu n'as rien trouvé dans la documentation officielle?
28/04/2013, 10h52
rodolphebrd

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...:lol:
28/04/2013, 14h07
oceane751
j'ai déjà vu ce topic
donc j'avais mis
Code:

1 2 3 behavior: url(/PIE.htc); position:relative;
mais ça ne marchait pas plus

et le "ctrl +k" ne fonctionne pas chez moi
28/04/2013, 16h01
oceane751

J'ai créé un .htaccess avec

Code:

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:

<?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..
28/04/2013, 17h26
rodolphebrd

Concernant la doc officielle tu as besoin d'aide pour la traduction?
28/04/2013, 17h29
oceane751

suis vraiment désolé mais il est vrai que l'anglais et moi ça fait 10 :oops:
J'ai tenté de comprendre en faisant ce que j'ai écrit dans mon dernier post...

et un test du type:

Code:

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

Code:

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);
}

28/04/2013, 22h44
Candygirl

Citation:

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 :aie:

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.
28/04/2013, 23h11
rodolphebrd

Voilà une réponse qu'elle est bien. :ccool:

J'ai quand même cherché un bout de temps pour ne rencontrer que des solutions bancales.

Voir 40 message(s) de cette discussion en une page