28173 sujets

CSS et mise en forme, CSS3

Bouton submit, image de fond et taille variable...[resolu]

bonjour,

je suis en train de refaire un site et je voudrais "standardisé" les boutons submit de mes formulaires.

J'ai donc mis une image de fond qui contient juste une petite puce en haut a gauche et une 'bordure' à gauche en bas et en haut.Cette image fait 500 px de large de façon a pouvoir mettre le texte que je souhaite dans le bouton.

Pour fermer le bouton je met à droite une bordure de la même couleur que les bordures de l'image. Et la IE (comme d'habitude Smiley cligne ) fait des siennes. La bordure n'est pas collé à l'image et elle dépasse de 1px vers le haut et de 1px vers le bas (je sais c'est pas beaucoup mais ca se voit un peu... Smiley confus )


Je vous met ici le code : 

<html>
<head>
<style>
input.boutonStandard{
	background-image: url(boutonStandard.gif);
	border: thin white;
	border-right : 1px solid #9ECF10;
   /* border-bottom : 1px solid #9ECF10;*/	
	color: #9ECF10;
	background-color:white;
	background-repeat: no-repeat;
	text-decoration: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: bolder;
	height : 21px;
	_height : 23px;	
	padding-top : 1px;
	padding-bottom : 1px;
	_padding:0;
	background-position : top left;
	padding-left:18px;
	overflow: visible;
	}

</style>
</head>
<body>

<form>
<input type="submit" class="boutonStandard" value="valider ce formulaire de taille variable...!!"/>
</form>
</body>
</html>



Est-ce que l'un d'entre vous à déja eu le problème ou à une idée?


Merci d'avance

romain
Modifié par <romain/> (01 Jun 2006 - 11:50)
huum non j'avais déja essayé...

Mais merci de t'interesser à mon problème Smiley cligne

En fait j'ai l'impression que l'image ne peux pas se superposé à la zone réservé aux bordures...

Est-ce que ca ne viens pas du fait que justement les bordure ne sont pas gérer (il me semble) de la même façon par IE et firefox?
personne n'a d'idée?


Bon bah sinon pour valider un formulaire, le seul moyen mis à part les inputs, c'est d'utiliser une fonction javascript?

Mais dans ce cas, les personnes qui n'ont pas javascript d'activé ne peuvent pas utilisé le formulaire...


romain
supprime ton image de 500px fais une image de 1px en repeat-x et tu n'auras plus besoin de mettre ta bordure
oui j'y avais pensé mais ca m'bligeait a changermon image qui avait un motif sur la gauche...

J'ai trouve une solution, je met le code ca pourrait servir à quelqu'un d'autre
le css: 


a.submit {
	display:inline-block;
	}

a.submit, input.boutonStandard {
	 clear:both;
	 background:url(../IMG/boutonStandard.gif) no-repeat left top;
	 border:0; 
	 height:21px; 
	 border-right:1px solid #A1D017; 
	 cursor:pointer; }

a.submit input, input.boutonStandard {
	text-decoration:none;
	color:#A1D017; 
	font-family:Verdana; 
	font-size:10px }
	
a.submit input {
	background:none; 
	border:none; 
	padding-left:18px;  
	padding-right:8px; 
	_width:1%; 
	overflow:visible;}
	
input.boutonStandard {
	padding-left:15px; 
	padding-right:8px;}

a.submit:hover,input.boutonStandard:hover {
	background:url(../IMG/boutonStandardHover.gif) no-repeat left top;
	}

et le (x)html : 


<!--[if lt IE 7]><a href="javascript:void(0)" class="submit"><!IF END-->
<input type="submit"  class="boutonStandard" value="OK" id="formLogSub"/>
<!--[if lt IE 7]></a><!IF END-->


En fait j'entoure le bouton submit d'un lien que je style. Et je ne met ce lien que pour les version de IE anterieur a IE7...


Merci de votre aide

romain
Sujet clos
Aller à