28172 sujets

CSS et mise en forme, CSS3

Design bouton submit

Bonjour,

J'essaye de mettre en forme mon champ de recherche, mais je suis confronté a plusieurs problèmes
Je n'arrive pas a centrer la loupe, toujours un décallage entre IE et firefox
Sous IE 8 ( pas testé sur les autres pour le moment ), la taille de mon formulaire et "réduit"

Pouvez-vous m'aider s'il vous plait ?

ci-dessous une copie d'écran et le code utilisé :

upload/30650-submitexem.jpg 


<html>
<head>

<style>

form#search, form#search fieldset{
	position: absolute;
	margin: 0;
	padding: 0;
	color:red;
}

form#search fieldset{
	vertical-align: baseline;
	border:none;
	border: 1px solid red;
}

form#search{
	width: 180px;
	height: 20px;
	line-height: 20px;
}

form#search input[type="text"] {
	height: 16px;
	margin: 0;
	padding: 2px 5px;
	border: 1px solid #444;
	color:red;
	width: 180px;
	box-shadow: inset 0 0px 2px #444;
}

form#search input.search-submit {
	display: block; /* IE empeche l'apparition du texte dans le submit*/
	font-size: 0;  /* IE empeche l'apparition du texte dans le submit*/
	line-height: 0; /* IE empeche l'apparition du texte dans le submit*/
	margin: 0;
	border: none;	
	width: 13px;
	height: 13px;
	text-indent: -9999px;
	position: absolute;
	top: 5px;
	right: 2px;
}
.search-submit {
	background-position: 0 -1217px;
}

.search-submit{	
	background-image: url('/submit_exemple.png');
	background-repeat: no-repeat;
}

</style>


</head>
<body>
<form id="search" action="" method="get">
	<fieldset>
	  <input class="text" type="text" name="s" onfocus="this.value='';" value="Rechercher...">
	  <input class="search-submit" type="submit" value="go">
	</fieldset>
</form>
<br><br><br><br>
<div style="width:180px;height:20px;border:1px solid black;">
</div>
</body>
</html>


Merci beaucoup
José
Il est possible que tes différence tienne de la police ou taille de police différentes d'un nav a l'autre ou du line-height si ceux ci ne sont pas declaré dans ta feuille de style.

pour cacher le texte, Je pense que plus simplement et comme ceci cela devrait fonctionner:

form#search input.search-submit {		
	margin: 0;
	border: none;
	width: 13px;
	height: 13px;
overflow:hidden;/* on bloque la taille */
text-indent:14px;
	position: absolute;
	top: 5px;
	right: 2px;
}
J'ai finalement réussit à m'en sortir

J'ai rajouté ceci :

form#search input.text{
	width: 180px;
}


Je me suis aperçu que 
form.search input[type="text"]
n'étais pas pris en compte par IE

merci beaucoup
Sujet clos
Aller à