28173 sujets

CSS et mise en forme, CSS3

[RESOLU tristement]Problème d'affichage IE sur input et submit

Bonjour, je rencontre un problème pour la mise en forme d'une formulaire de recherche entre IE et firefox

globalement, voici ce que j'essaye de mettre en place :
http://lucmuller.free.fr/galerie/images/luc_firefox_860.jpg

ici dans le cas de firefox, tout se passe bien l'input et le submit sont bien aligné, et font la même taille verticalement.
une fois que l'on passe dans IE cela donne ceci :
http://lucmuller.free.fr/galerie/images/luc_ie_266.jpg

Je le conçoit, l'affichage n'est pas vraiment identique au niveau de l'input entre IE et firefox, mais j'aimerai uniquement trouver une solution pour éviter la déviation verticale.

Je vois souvent des formulaire de recherches de ce types sur le web.

c'est d'ailleurs couramment utilisé dans les blog, et notamment dotclear. c'est pour ca que je pense que ce problème de décalage ne viens pas forcément d'un problème de CSS car le problème est le même sur bien des sites. voyons quelques exemple :

firefox : http://lucmuller.free.fr/galerie/images/tiko_firefox_886.jpg
IE : http://lucmuller.free.fr/galerie/images/tiko_ie_846.jpg

toujours le même problème de décalage d'un pixel mais vers le haut cette fois

encore un exemple :
Firefox : http://lucmuller.free.fr/galerie/images/torzka_firefox_348.jpg
Ie : http://lucmuller.free.fr/galerie/images/torzka_ie_604.jpg

Bref mon problème serait de trouver une solution CSS valide au W3C pour afficher ce genre de formulaire avec des input de taille identique (tout du moins sans ce vilain décalage vertical)
Solution qui doit tenir dans une seule feuille de style, c'est a dire, pas de hack IE? pas de commentaires conditionnel, il faut absolument que cela soit passe partout Smiley smile

le syntaxe XHTML à mettre en oeuvre serait de ce type :

<form action="" method="post">
<p><input type="text" id="mot" class="texte" value="" />
<input type="submit" id="submit" name="envoyer" class="submit" /></p>
</form>


Pour la CSS, je vous laisse imaginer, mais voiçi un exemple qui pourrai le mettre en form :

form p{
	text-align: left;
	margin: 0px;
	padding:0px;
	vertical-align:top;
	color:#2E32BA;
}

form input.texte{
	margin:0px;
	padding:0px;
	width:116px;
	border:1px solid #F17000;
	color:#F17000;
	background:url("images/loupe.jpg") white no-repeat 2px 2px;
	padding-left:20px;
	vertical-align:top;
	height:21px;
	margin-top: 1px;
}

input.submit{
	margin:0px;
	padding:0px;
	width: 29px;
	border:1px solid #FF8609;
	color:#FF8609;
	vertical-align:top;
	height:23px;
	position:relative;
	top:1px;
	margin-left:3px;
	margin-top:0px;
	background-color:#FFCA00;
	font-weight:bold;
	cursor:pointer;
	color:#2E32BA;
}


donc dans ce cas on se retrouve avec le décalage d'un pixel une solution (hélas non valide au W3C) permettant de pallier le problème est d'ajouter

*margin-top:1px; dans le input.submit

mais hélas, 3 fois hélas, ça me plante ma feuille de style sur la validation...
bref, si qqun aurait une solutions pour ce souci, je lui en serait ENORMEMENT reconnaissant Smiley smile
Modifié par Viper82 (08 Mar 2007 - 11:16)
bon ben, je vais finir par croire que mon problème est insolvable...
y'aurait un expert de la css dans le coin ?
Bonjour,

Viper82 a écrit :

Bref mon problème serait de trouver une solution CSS valide au W3C pour afficher ce genre de formulaire avec des input de taille identique (tout du moins sans ce vilain décalage vertical)
Solution qui doit tenir dans une seule feuille de style, c'est a dire, pas de hack IE? pas de commentaires conditionnel


la solution passe justement par les commentaires conditionnels (et la suppression de l'accumulation ci-dessus de marges, de vertical-align:top, etc).
Hmmmmmmmmmmm...
je voulais une réponse d'une expert, j'en ai eu une... merci beaucoup
y'a pas de solution qui n'utiliserai pas de commentaire conditionnels ?

on a vu ce que ça a donné les commentaires conditionnels et autreç hack IE etc etc lors du passage IE6/IE7, je souhaite autant que possible éviter cette solution ?

Sinon a part, ça et pour ma propre culture, d'où provient de genre de problème ? est une différence de rendu navigateur sur les boutons submit qui quoi qu'on en fasse ne s'affichent pas de la même manière en fonction du browser ? un peu comme les boutons radio ou les checkboxes ?

Autre question : dans quelle mesure(s) FAUT il utiliser des commentaires conditionnels ?

Autre question bis, dans le cas de la mise en place d'un commentaire conditionnel (j'en utilise jamais d'habitude) quelle est la meilleur manière de procéder ?

- En entête de page en chargeant une CSS différente ?
- En entête de page en chargeant une CSS en plus contenant uniquement les modifs pour IE ?
- sur l'input, en différenciant if IE et if NOT IE et en chargeant deux input différents et en appliquant un style en ligne sur le premier ?
Modifié par Viper82 (08 Mar 2007 - 10:02)
Viper82 a écrit :

on a vu ce que ça a donné les commentaires conditionnelles hack IE etc


Je crois qu'il faut se réintéresser de près aux commentaires conditionnels, là. Ils n'ont rien à voir avec les hacks CSS, justement. Ils sont valides, fiables, précis, légers, ... Pas tout à fait que du bonheur, mais pas loin si l'on s'en sert raisonnablement.

Viper82 a écrit :

Sinon a part, ca et pour ma propre culture, d'où provient de genre de problème ?[:quote]

Du fait que les contrôles de formulaires ne sont pas des contenus texte HTML, mais des objets spécifiques que chaque navigateur gère à sa manière dans le plus joyeux b... en fonction de l'OS.

[quote=Viper82]
Autre question : dans quelle mesure(s) FAUT il utiliser des commentaires conditionnels ?


Il ne "faut" pas. Simplement, c'est actuellement (durablement, risquerais-je) la solution la plus robuste que nous ayons sous la main en cas de nécessité.

Viper82 a écrit :
- En entête de page en chargeant une CSS différente ?
- En entête de page en chargeant une CSS en plus contenant uniquement les modifs pour IE ?
- sur l'input, en différenciant if IE et if NOT IE et en chargeant deux input différents et en appliquant un style en ligne sur le premier ?


CSS corrective de quelques lignes pour IE.

Ne pas refaire une CSS complète (inutile), être très prudent quant les commentaires conditionnels servent à faire deux HTML différents, c'est l'inconnue la plus totale en termes de coûts et de pertinence.
Modifié par Laurent Denis (08 Mar 2007 - 10:07)
Mince de Mince...

bon ben, je me met un coup de pied au cul et je m'y met.

euh, une dernière questions.
si je peux détecter a priori quel est le navigateur utilisé, c'est mieux qu'un commentaire conditionnel non pour la feuille de style annexe, non ?

pfff pff tain... sérieux, la loose quoi... faire une nouvelle feuille de style, pour un décalage de 1px...
Viper82 a écrit :
euh, une dernière questions.
si je peux détecter a priori quel est le navigateur utilisé, c'est mieux qu'un commentaire conditionnel non pour la feuille de style annexe, non ?


Non pour les deux questions.
Ben merci pour toutes ces infos en tout cas Smiley smile
ce fut très précieux Smiley smile

EDIT : Bon ben je confirme... ça marche bien avec les commentaires conditionnels
Modifié par Viper82 (08 Mar 2007 - 12:09)
Sujet clos
Aller à