Aplliquer une classe à un bouton submit

[sparh]

Bonjour,

donc j'ai fait une classe .bouton

Cer que je ne comprends pas c'est que si je l'applique à un input type submit ça ne rend pas pareil que si je l'applique à un lien texte

	.bouton {
background: #d0d0d0;
background-image:url(images/background_bouton.png);
background-position: 0px -2px;
background-repeat:repeat-x;
border:1px solid #383838;
height:22px;
padding:2px 7px;
-moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; -khtml-border-top-left-radius: 12px; border-top-left-radius: 12px; 
 -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; -khtml-border-top-right-radius: 12px; border-top-right-radius: 12px; 
 -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; -khtml-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; 
 -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; -khtml-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
 color:#383838;
 font-weight:bold;
 cursor:pointer;
 size:12px;
 font-size:12px;
 line-height:normal;
}

et voilà le rendu !

Avez vous une idée pour que :

- le rendu soit identique que la classe soit appliquée sur un lien ou un input.

- le rendu soit identique sur tous les navigateurs

Merci d'avance

[Nicolas]

Bonjour,

Tu utilises la propriété de feuille de style css -moz-border-radius qui n'est reconnu que par FireFox et Nestcape.

[Ernestine]

Salut,

Nicolas > même sans les border-radius ça ne change pas son problème

Je n'avais jamais remarqué ce phénomène : Firefox rajoute une marge interne au bouton, non contrôlable par un simple 'padding' dans la CSS. Après quelques recherches, pour empêcher cet ajout, il faut inclure dans la feuille de style :

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

Par contre, pour que le rendu soit vraiment identique entre le lien et le bouton, tu devrais aussi ajouter à la class .bouton ceci :

display: inline-block;

[captain_torche]

Nicolas a raison malgré tout : il FAUT préciser la propriété CSS valide (border-radius), de même que les autres préfixes navigateurs (-webkit-border-radius).

[sparh]

Bonjour et déjà merci de vous être penché sur le sujet.

J'ai donc ajouté :

display: inline-block; et c'est encore pire !

Pour captain_torche tu as lu un petit peu vite (je crois) regarde bien:

-moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; -khtml-border-top-left-radius: 12px; border-top-left-radius: 12px; 
 -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; -khtml-border-top-right-radius: 12px; border-top-right-radius: 12px; 
 -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; -khtml-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; 
 -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; -khtml-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;

Et voilà le rendu avec inline-block;

En remplaçant font-weight:bold; par font-weight:900; et en spécifiant la police à utiliser c'est un peu mieux mais on a toujours une différence :

Voilà ma classe actuelle :

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
	.bouton {
	font-family: Arial, Verdana, serif;
	font-size: 12px;
background: #d0d0d0;
background-image:url(images/background_bouton.png);
background-position: 0px -2px;
background-repeat:repeat-x;
border:1px solid #383838;
height:22px;
padding:2px 7px;
-moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; -khtml-border-top-left-radius: 12px; border-top-left-radius: 12px; 
 -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; -khtml-border-top-right-radius: 12px; border-top-right-radius: 12px; 
 -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; -khtml-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; 
 -moz-border-radius-bottomright: 12px; -webkit-border-bottom-right-radius: 12px; -khtml-border-bottom-right-radius: 12px; border-bottom-right-radius: 12px;
 color:#383838;
 font-weight:900;
 cursor:pointer;
 line-height:normal;
}

et le rendu :

A la limite que ce soit différent d'un navigateur à l'autre ça ne me dérange pas trop, ce qui me dérange c'est que :

<a href="#" class="bouton">test</a> est différent de <input type="submit" class="bouton" value"test" /> dans le même navigateur ?!?

[Ernestine]

J'ai donc ajouté :

display: inline-block; et c'est encore pire !

Non mais après tout dépend du contexte, des éléments qu'il y a autour, etc... Quand je parlais de mettre un inline-block sur le lien, c'était dans le but de pouvoir lui appliquer des dimensions, mais évidemment c'est à adapter, je ne sais pas ce que tu as autour.

En épurant tes styles CSS au maximum (entre autres sans les border-radius) la différence de rendu est toujours la même (mais tout rentre dans l'ordre avec le input::-moz-focus-inner)

Sinon, je me demande pourquoi tu as un gros pâté de border-radius, alors qu'un simple :

border-radius: 12px;

suffirait. En effet, border-radius (sans préfixage) est reconnue par Firefox, Chrome et Opéra depuis déjà plusieurs versions, ainsi qu'IE9. Tes préfixages n'ont évidemment aucun effet sur IE8-, et la proportion de gens utilisant des (relativement) anciennes versions de Firefox, Chrome et Opéra est quand même assez faible, en tout cas suffisamment faible pour éviter de charger le code avec toutes ces lignes.

Après, si vraiment tu y tiens, tu pourrais tout au moins te contenter de :

-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px
border-radius: 12px;

(pas la peine de le faire pour les quatre coins puisque la valeur est la même)

Quoiqu'il en soit, si vraiment tu n'y parviens pas, tu peux toujours déclarer deux class différentes (une pour les boutons, une pour les liens)