[Résolu] 2 boutons à alignés

J'aimerai aligner 2 boutons, ceux-ci utilisent des images (l'un en background et l'autre parce qu'il est de type image).
J'aimerai que l'input text soit calé pile poil à côté de l'input image, facile, mais niveau hauteur il y en a toujours un plus haut que l'autre oO

Et quand ça marche sur une navigateur ça ne marche pas sur un autre donc c'est que je fais du bidouillage et que ce n'est pas bon !

Si vous avez une idée =/

voici mon code :

<form action="#" method="POST">
						<p><input type="text" /><input type="image" title="Envoyer" value="envoyer" src="./images/bouton_envoyer.png" alt="Envoyer" /></p>
					</form>

#recherche input[type=text] {
	padding-left: 10px;
	display: inline-block;
	padding-top: 3px;
	height: 17px !important;
	width: 127px !important;
	font-size: 12px;
	border: none !important;
	background: url(../images/champ_recherche.png) no-repeat !important;
}

#recherche input[type=image] {
	display: inline-block;
	height: 17px !important;
	border: none !important;
}

Modifié par gorn (14 Sep 2011 - 12:03)

Bonjour,

tu peux virer immédiatement :
- les !important (pourquoi utiliser le napalm ?),
- height (pour les blocs c'est min-height pour qu'on puisse zoomer et agrandir/réduire en hauteur, pour les éléments dans le texte rien ou padding-top/-bottom et/ou line-height sur le paragraphe conteneur)

Conseils :
- joue avec le padding du premier input pour qu'il ait la même hauteur que l'input image
- précise un line-height sur form p (1.5 càd 150% par exemple)
- vertical-align (pour essayer rapidement les valeurs possibles, fixe-le à un truc de ton choix puis dans Firebug ou autre Inspecteur tu peux cycler parmi toutes les valeurs possibles. Savoir à l'avance ce que tu veux et si c'est sur le conteneur ou l'élément demande d'avoir longuement médité seul en haut d'une montagne ...)

EDIT:
et pour IE7, y a des chances que tu aies un décalage d'1px de hauteur ou d'alignement vertical : à corriger via commentaire conditionnel.
Modifié par Felipe (13 Sep 2011 - 19:10)

merci bien pour ton aide. J'ai retiré pas mal de trucs cochons et j'ai mis un hack javascript pour palier au changement par rapport aux navigateurs :

#recherche input[type=text] {
	padding-left: 10px;
	display: inline;
	width: 127px;
	font-size: 12px;
	border: none;
	background: url(../images/champ_recherche.png) no-repeat;
}

#recherche input[type=image] {
	margin-bottom: -3px;
	display: inline;
    height: 17px;
	border: none;
}

#recherche {
	float: right;
	width: 220px;
	height: 37px;
	line-height: 37px;
	background: url(../images/recherche.png) top right no-repeat;
}

#recherche form p {
	margin: -2px 0 0;
}

// Détection du navigateur pour adapter la css du formulaire de recherche (l'alignement des boutons)
	var Nom = navigator.userAgent;
		if (Nom.indexOf("MSIE") >= 0) {
			$("#recherche input[type='image']").css({'margin-bottom': '-4px'});
		}
		else if (Nom.indexOf("Chrome") >= 0) {
			$("#recherche input[type='image']").css({'margin-bottom': '-4px'});
		}
		else if (Nom.indexOf("Safari") >= 0) {
			$("#recherche input[type='image']").css({'margin-bottom': '-5px'});
		}
		else if (Nom.indexOf("Opera") >= 0) {
			$("#recherche input[type='image']").css({'margin-bottom': '-4px'});
		}