28172 sujets

CSS et mise en forme, CSS3

Tout bête... et pourtant !

Bonjour à tous et bonne année 2011 !

Je suis confronté à un problème d'alignement bête comme chou et pourtant, pas moyen d'aligner correctement un bête bouton dans IE.

Voici mon code html :


<FORM id="BPTB" ACTION="http://www.google.fr" target="_blank"><INPUT TYPE="SUBMIT" VALUE="Go to"></FORM>


Et mon css :

#BPTB{
	border:1px solid red; /* c'est juste pour visualiser le form */
        width:50px;
	margin-top:250px;
	margin-left:250px;
}


Sous Firefox et Chrome, pas de problème, tout se positionne comme il faut.

Sous IE8 (ou IE7), le bouton est décalé par rapport au cadre <form>. J'ai déjà cherché dans les astuces du site, tenté des alignements différents, rien n'y fait.
L'exemple que je cite ici est basique. Le problème est que j'ai ce problème récurrent sur tout un site...

Savez-vous d'où cela provient ? Comment se fait-il qu'il y ait cette fausse marge sous IE ?
Avez-vous une astuce ou une solution à me suggérer ?

Merci à vous !
Bonjour,

Avec si peu de code, il va être difficile de te répondre ; une page en ligne serait plus facile à analyser.
Bonjour

En fait ce bout de code se suffit à lui-même. C'est un "bug" que je n'arrive pas à résoudre en css.

Voici l'exemple d'une page test :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>

<style type="text/css">
#BPTB{
	border:1px solid red;
	/*position:absolute;*/
	width:50px;
	margin-top:250px;
	margin-left:250px;
}
</style>


</head>

<body>
test
<FORM id="BPTB" ACTION="http://www.google.fr" target="_blank"><INPUT TYPE="SUBMIT" VALUE="Go to"></FORM>
</body>
</html>
essaye ça peut être ça aidera, des fois ie a des souci avec le positionnement

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
 
<style type="text/css"> 
#BPTB{ 
    border:1px solid red; 
    /*position:absolute;*/ 
    width:50px; 
    margin-top:250px; 
    margin-left:250px; 
} 
#myButton
{
position:relative;
}
</style> 
 
 
</head> 
 
<body> 
test 
<FORM id="BPTB" ACTION="http://www.google.fr" target="_blank"><INPUT TYPE="SUBMIT" VALUE="Go to" id="myButton"></FORM> 
</body> 
</html>
bonjour,


Ou pour IE7 et rester autant que possible dans le flux, le bug peut-etre resolue avec un (avec ou sans commentaire conditionnel) : 

<!--[if IE 7]><style>
#BPTB{ float:left;display:inline;}
</style><![endif]-->


GC

<troll-hs>et hop un bug de plus chez IE ... super productif</hs>
Il semblerait que sous IE le bouton en lui même soit plus large.

La seule solution semble donc de fait un Hack IE dans le CSS
Modifié par mamax (03 Jan 2011 - 14:33)
Merci pour vos retours !

@qualitras : malheureusement, cela n'a rien changé...

@gc-nomade : ton code marche ! merci Smiley smile


En tapant un peu vite au clavier, une autre solution est apparue : Mettre un &nbsp; 

<FORM id="BPTB" ACTION="http://www.google.fr" target="_blank">&nbsp;<INPUT TYPE="SUBMIT" VALUE="Go to"></FORM>


Allez comprendre...

Merci à tous !
bonsoir,

content pour toi, d'ailleurs je prefere de loin ta solution du caractére insecable.

Cordialement, GC
Sujet clos
Aller à