Defi pour mes amis webdesigner

Voila un souçi que je rencontre dans la réalisation des mes projets au boulot, et j'ai remarqué que je n'étais pas le seul.

Je n'ai hélas pas encore trouvé de solution acceptable pour pallier le problème.

alors, globalement voici le concept.

Je souhaite mettre en place un formulaire simple : 1 input text et un input submit, les deux côte à côte, et que le rendu soit rigoureusement identique sur les navigateurs suivant : Firefox, Opera, Ie7 ET Ie6.

En gros, la structure HTML ressemblerait à ça

rien de plus, rien de moins

Je cherche une solution propre, c'est à dire : n'utilisant pas de commentaires conditionnels, n'utilisant pas de Hack IE Et SURTOUT que la CSS soit valide au W3C, j'ai déjà trouvé une solution, mais non valide ( :( utilisant un hack je crois)

Malheureusement je constate toujours, et quoi qu'il arrive, peu importe la configuration CSS en jouant sur les margins, les paddings et consor, je m'en sort toujours avec un décalage vertical de 1 p***** de pixel.

voiçi par exemple sur mon site.

Version firefox

bug css

Version IE6

bug css

On voit clairement un décalage d'un pixel vers le bas, cela dépend des marges et paddings utilisé en CSS, globalement le souci intervient sur l'alignement vertical du bouton.

Je vous entend déjà : "ouééé, t'es nul en CSS, vas t'acheter un tutoriel" Mais la je dis non. le problème est identique ailleurs.

Par exemple chez Tiko

Version firefox

Bug css

et versionIE6

Bug css

Toujours le même pixel de décalage, mais là décalé vers le haut.

Voyons le phénomène chez Torzka

Version firefox

Bug Css

et version IE6

bug css

Dans ce dernier cas, on constate que l'affichage n'est pas identique du tout, cependant, le pixel de décalage est bel est bien présent (vers le haut), pour le reste de la mise en forme c'est totalement jouable.

Est ce que quelqu'un aurait une solution à ce problème, j'aimerai bien pouvoir créer des formulaires de recherche sur une seule ligne.

Viper jeudi 01 mars 2007 : 19:31 Web Life

Liberté d'expression :

Par Tiko, vendredi 02 mars 2007 à 09:43

Je suis désolé pour toi mais tu ne pourra jamais avoir exactement le même résultat sur tous les navigateurs vu qu'ils utilisent différents moteurs de rendu. Surtout quand tu cherches à avoir le même résultat dans IE par rapport aux autres browser (Opera, Netscape, Firefox, ...).Dans ton cas, tu peux toujours utiliser une image pour ton boutton "ok".

Par Luc, vendredi 02 mars 2007 à 10:25

Nope, même avec une image y'a le même décallage de 1 pixel...Allez Allez, je suis sur qu'avec un peu de recherche ca se trouve...pour ma part, je suis arriver à le faire, mais avec un bout de CSS invalide ;)Allez tentez de relever le défi 

Par MisterDanilo, vendredi 09 mars 2007 à 12:15

L'astuce est de jouer sur le padding du champ ainsi que les marges en haut et en bas. Personne ne constatera un espace dans le champs. En fait IE et FireFox gèrent leurs formulaires de différentes manières mais se basent sur les mêmes éléments de base : les "Input". A toi maintenant de jouer avec les padding-top, padding-bottom, margin-top et margin bottom ... C'est assez simple

Par Luc, vendredi 09 mars 2007 à 12:30

Non non non... :(comme je l'ai dit dans le billet : Malheureusement je constate toujours, et quoi qu'il arrive, peu importe la configuration CSS en jouant sur les margins, les paddings et consort, je m'en sort toujours avec un décalage vertical de 1 p***** de pixelen fait, la seule solution pour régler ce problème est l'utilisation de commentaire conditionnels pour distinguer IE et lui apporter une feuille de style qui rétabliera la bonne marge spécialement pour ce navigateur, coup de bol, la solution s'applique et pour IE6 et pour IE7.Voir la solutions sur alsacreation.

Par annuaireandco, samedi 02 août 2008 à 01:08

La solution est de mettre :    line-height: 12px;    font-size: 12px;dans le champ et le bouton submit.  

Par Viper, samedi 02 août 2008 à 13:50

Pas con, pas con, j'essaierai sur le prochain projet que je met en place.mais je crois n'avoir pas essayé la notion de line-height effectivement pour homogénéiser le tout...

Par Viper, jeudi 03 février 2011 à 15:57

Ouéééééééééééééééééééééééé j'ai solutionné ce problème...la solution : placer le div ou p parent en position:relative;placer l'input text en position:absolute;placer l'input submit en position:absolute; affecter left de l'input submit à la largeur de l'input text.CQFD. compatible safari, chrome, firefox IE6/7/8

Flux RSS des commentaires

Donner son avis

les indications suivies d'un * sont obligatoires

Filtre anti-spam

Votre IP est : 54.198.139.112.
En cliquant sur poster, vous acceptez qu'elle soit enregistrée et vous engagez à ce que votre commentaire respecte la législation en vigueur.
Je supprimerai tout commentaire hors de propos.

Se souvenir de mes informations