Discussion :

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

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.

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