Bonjour à tous,

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

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
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.