Problème de bouton décalé vers le bas dans firefox

21 nov. 2007, 12:39

Bonjour,

J'ai un petit probleme d'alignement dans un bloc DIV.
J'ai un bloc DIV avec un texte, une zone de texte input, et un bouton. Ceci dans cet ordre.
Tout cela est aligné sur une seule ligne.
Avec IE tout est parfaitement aligné, par contre avec firefox le bouton est décalé vers le bas
d'environ 5 a 6 pixels.

Code : Tout sélectionner

CSS

div#box {
position: absolute;
margin-top: 125px;
margin-left: 310px;
margin-right: auto;
width: 400px;
height: 40px;
vertical-align: middle;
font-family: verdana;
font-size: 10px;
}

html

<div id="box">
cinema: <input name="cinema"
style="width: 180px; height: 14px;" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;
<img style="width: 24px; height: 16px; vertical-align: middle;"
 alt="OK" src="images/OKAY.gif" border="0" />
</div>

Le code a l'air bon, mais j'observe toujours ce décalage du bouton vers le bas
quelque soit les modifications que j'apporte. Merci.

Edit : Je viens de trouver sur un site qu'il y a effectivement un problème d'interprétation
de la propriété vertical-align des CSS.
Alors si quelqu'un a trouvé une astuce ?

21 nov. 2007, 14:19

Et comme ceci ?

Code : Tout sélectionner

div#box {
 margin:0;padding:0;
 position: absolute;
 top: 125px;
 left: 310px;
 
 width: 400px;
 height: 40px;
[color=red] vertical-align: middle;[/color]
 font-family: verdana;
 font-size: 10px;
}

C'est mieux d'enlever vertical-align, son interprétation diffère de l'endroit ou elle est utilisée, et par quel navigateur.

Edit de réponse à l'édit:
Quel comportement recherche-tu ? est-ce le but que div#box soit centré sur toute la page, en plein milieu (horizontalement et verticalement) ?

21 nov. 2007, 14:33

Si ton div#box a une longueur et une largeur bien déterminé pas besoin de mettre un vertical-align (qui peut être mal interprété par certain navigateur).

Calcul le milieu verticalement en prenant en compte ta police et tes margin.

21 nov. 2007, 14:43

Edit de réponse à l'édit:
Quel comportement recherche-tu ? est-ce le but que div#box soit centré sur toute la page, en plein milieu (horizontalement et verticalement) ?

Non pas du tout, le bloc est fixé sur la droite et ne fais que 40 pixels de haut.
J'ai essayé plusieurs astuces comme passer la position en relative, mais ça ne change rien.
Pareil si j'utilise une balise en-ligne pour lesquelles le vertical-align est fait.
Je pense que le problème provient du fait qu'il y a sur la même ligne un champ texte
et un bouton image. J'ai fixé la hauteur de la zone de texte dans le input avec style,
et à l'écran les pixels ne correspondent pas du tout à la hauteur du texte.
Mais c'est bizarre que le bouton ne veuille pas s'aligner.
En tout cas merci pour votre aide. Je continue de chercher.

21 nov. 2007, 17:07

Bon j'ai pas trouvé de solution. Alors j'ai divisé le bloc en deux div,
en position absolue. Mais même cette solution n'est pas parfaite.
Il existe à l'arrivée un pixel de décalage, entre l'affichage de FF et IE.

Mais bon c'est déjà beaucoup mieux.

Je n'ai pas appliquer le tag résolu, car le probleme n'est pas totalement résolu,
seulement en partie.

Edit: J'ai finalement trouvé la solution, il faut utiliser un tableau
lorsque l'on veut aligner des élements horizontalement dans un bloc.

Problème de bouton décalé vers le bas dans firefox

Qui est en ligne