[CSS 3] PIE.htc sur des boutons sous IE7

[Pauloscorps]

Bonjour à tous,

J'ai des <input type="button" / "submit"> sur mon site, que j'ai stylisé en CSS3.
Voici leurs propriétés :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

input[type="button"],
input[type="submit"]
{
	width:auto;
	height:auto;
	border-radius:0.5em;
	-moz-border-radius: 0.5em;
        -webkit-border-radius: 0.5em;
	-khtml-border-radius: 0.5em;
        behavior: url('pie/PIE.htc');
	border:1px solid #836465;
	border-color:#836465;
	font-size:0.75em;
	padding-left:0.8em;
	padding-right:0.8em;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #e8e1e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e8e1e1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#e8e1e1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#e8e1e1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#e8e1e1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e1e1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffffff 0%,#e8e1e1 100%); /* W3C */
	float:right;
	margin-right:1em;
	position: bottom right;
}
input[type="button"]:hover,
input[type="submit"]:hover
{
	border:1px solid #c09899;
	cursor:pointer;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #e8e1e1 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e1e1), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e8e1e1 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e8e1e1 0%,#ffffff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #e8e1e1 0%,#ffffff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e1e1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #e8e1e1 0%,#ffffff 100%); /* W3C */
}

Viennent s'ajouter à ses boutons différentes classes qui permettent de changer entre autres leur taille (petit, grand) et la couleur du texte (rose, vert, bleu, orange,...).

J'ai cependant un problème sous IE7 puisque les angles sont carrés.
J'ai pourtant bien appelé mon fichier pie.htc, le chemin est bien le bon.

En effet, les angles arrondis fonctionnent sous IE7 sur toutes les div sur lesquelles ils sont appliqués mais pas sur les boutons (et uniquement sur les boutons).

Je précise cependant que je ne peux en aucun cas passer sur un système de sprite / rollover, le choix des boutons en CSS3 ayant été pris par le développeur du projet (qui est aussi mon supérieur ).

Si quelqu'un aurait une idée pour régler ce problème...

Merci d'avance,
Pauline.

[Bisûnûrs]

Tu peux utiliser l'élément button à la place des input, et ça fonctionne.

[Pauloscorps]

Merci de ta réponse Bisûnûrs.

Les boutons du site étaient initialement en <button> mais le développeur me les a tous fait changer (et croyez moi il y en a un paquet) pour des <input type="button">. Je ne sais plus trop pour quelle raison.

Toujours est-il que par conséquent, je ne peux pas retourner à ces bons vieux <button> si simples à styler .

J'aurais donc besoin d'une autre solution.

Pauline.

[Bisûnûrs]

Essaie alors de remplacer ton border-radius en px plutôt qu'en em. Il semble qu'il y a un bug avec l'unité em.

[Pauloscorps]

Merci encore d'avoir répondu à nouveau, mais après avoir effectué cette modification, le résultat reste le même.

[Bisûnûrs]

Il en va de même pour les padding à mettre en px en fait (dans mon premier test j'avais tout viré, forcément ..).

[Pauloscorps]

Malheureusement, je les avait déjà passé en pixels pour le test précédent .

[Bisûnûrs]

Et en enlevant le filtre Gradient, ça se voit mieux ?

[Pauloscorps]

Et bien... non plus

[Bisûnûrs]

On peut voir ton code exactement ? Ton résultat avec un screenshot ? Un lien vers le problème en question (avec une page simplifiée sur le problème) ?

[Pauloscorps]

Bonjour,

Voici le code HTML (interprété par le navigateur) de mes boutons :

Code :

1
2
3
<input type="button" id="ajoutpanier" name="ajouter au panier" class="ajoutpanier petit" value="Ajouter au panier">
 
<input type="button" id="decouvrir" class="marroncept petit" onclick="location.href='produit/354/688/Touroparc - ticket'" name="Voir la fiche du produit" value="Découvrir">

Et voici comme tu me l'a demandé un screenshot du problème :



En haut : les bons navigateurs.
En bas : ce foutu IE.

Comme tu peux le constater, même ma police (Arial) n'est pas respectée avec IE.

Je te fais une petite page rapide pour que tu puisse voir en direct

Pauline.

EDIT : Voici un lien vers le problème : http://www.paulineghiazza.fr/blog/ex...utons-ie7-pie/

Je crois avoir cependant oublié de préciser deux choses :

• Le site est construit avec Drupal
• Le problème est présent sous IE7, IE8 et IE9...

[Bisûnûrs]

Voilà un exemple de ton code un peu retouché qui fonctionne :
http://josselin.willette.free.fr/cod...es/pie-radius/

Exit le filtre Gradient, certaines valeurs en em et les input[type=machin].