18041 sujets

Questions générales et questions de débutants

Alignement vertical sous ie

Bonjour,

probleme :alignement vertical ne fctionne pas sous ie alors que c'est ok dans FF.Pouvez vous m'aider.la partie concerné est le formulaire de connexion de la balise P.vous constaterez que les élements de P sont centres verticalement dans FF et non dans ie. ci dessous le CSS et le HTML

*
{
margin: 0;
padding: 0;
position: relative;
}
body
{
font: .8em/1.3em "Trebuchet MS", Verdana, Arial, sans-serif;
background: #fff url(/Images/ImagesGenerales/bg_page.png) 0 0 repeat-x;
color: #333;
}

/*BARRE CONNEXION*/
div#connexion
{
position: absolute;
top: 0;
left: 0;
height: 47px;
width: 100%;
background: url(/Images/ImagesGenerales/bg_connexion.png);
text-align:center;
}
div#connexion form
{
width: 980px;
margin: 0 auto;
line-height: 47px;
height: 47px;
color: #ccc;
}
div#connexion form p{
height: 47px;
}
div#connexion h6
{
float: left;
font-size: 24px;
font-weight: normal;
text-shadow: 1px 1px 1px #000;
}
div#connexion label
{
margin-left: 20px;
}
div#connexion input#login, div#connexion input#password
{
width: 152px;
height: 17px;
padding: 3px 5px;
border: 0;
background: url(/Images/ImagesGenerales/bg_input_connexion.png) 0 0 repeat;
color: #fff;
}
div#connexion form input#valider{
width: 79px;
height: 23px;
padding-bottom: 5px;
margin: 0 10px;
border: 0;
background: url(/Images/ImagesGenerales/btn_connexion.png) 0 0 no-repeat;
color: #ccc;
cursor: pointer;
}
div#connexion form input#valider:hover{
color: #fff;
}
div#connexion form input#forgot_password{
width: 24px;
height: 24px;
background: url(/Images/ImagesGenerales/help_connexion.png) 0 0 no-repeat;
border: 0px;
cursor: pointer;
}
div#connexion form input#forgot_password:hover{
background-position: 0 -24px;
}
div#connexion form span{
position: absolute;
right: 0;
top: 0;
}
div#connexion span label{
margin-left: 0;
}


<body>
<div id="connexion">
<form action="#" method="post">
<h6>Accès membres</h6>
<p>
<label for="login">Login :</label>
<input type="text" name="login" id="login" />
<label for="password">Mot de passe :</label>
<input type="password" name="password" id="password" />
<input type="submit" value="connexion" id="valider" />
<input type="button" id="forgot_password" title="Mot de passe oublié ?" />
<span>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" />&nbsp;
<label for="remember">Se souvenir de moi</label>
</span>
</p>
</form>
</div>
</body>
Modifié par Eurosanguin (23 Aug 2011 - 06:26)
Bonjour,
Ci dessous la totalité du code à inserer dans un fichier pour les tests à faire su FF ou ie pour voir le probleme et me trouver une solution pour l'alignement vertical des input

<html>
<head>
<style>
*{
margin: 0;
padding: 0;
position: relative;
}
body
{
font: .8em/1.3em "Trebuchet MS", Verdana, Arial, sans-serif;
background: #fff url(/Images/ImagesGenerales/bg_page.png) 0 0 repeat-x;
color: #333;
}

/*BARRE CONNEXION*/
div#connexion
{
position: absolute;
top: 0;
left: 0;
height: 47px;
width: 100%;
background: url(/Images/ImagesGenerales/bg_connexion.png);
text-align:center;
}
div#connexion form
{
width: 980px;
margin: 0 auto;
line-height: 47px;
height: 47px;
color: #ccc;
}
div#connexion form p{
height: 47px;
background-color:red;
}
div#connexion h6
{
float: left;
font-size: 24px;
font-weight: normal;
text-shadow: 1px 1px 1px #000;
}
div#connexion label
{
margin-left: 20px;
}
div#connexion input#login, div#connexion input#password
{
width: 152px;
height: 17px;

border: 1px;

color: black;
}
div#connexion form input#valider{
width: 79px;
height: 23px;
padding-bottom: 5px;
margin: 0 10px;
border: 0;
background: url(/Images/ImagesGenerales/btn_connexion.png) 0 0 no-repeat;
color: #ccc;
cursor: pointer;
}
div#connexion form input#valider:hover{
color: #fff;
}
div#connexion form input#forgot_password{
width: 24px;
height: 24px;
background: url(/Images/ImagesGenerales/help_connexion.png) 0 0 no-repeat;
border: 0px;
cursor: pointer;
}
div#connexion form input#forgot_password:hover{
background-position: 0 -24px;
}
div#connexion form span{
position: absolute;
right: 0;
top: 0;
}
div#connexion span label{
margin-left: 0;
}

</style>
</head>
<body >
<div id="connexion">
<form action="#" method="post">
<h6>Accès membres</h6>
<p>
<label for="login">Login :</label>
<input type="text" name="login" id="login" value="GGGGGGGGGGGGGGGGGGGG" />
<label for="password">Mot de passe :</label>
<input type="password" name="password" id="password" />
<input type="submit" value="connexion" id="valider" />
<input type="button" id="forgot_password" title="Mot de passe oublié ?" />
<span>
<input type="checkbox" name="remember" id="remember" class="checkbox" value="1" />&nbsp;
<label for="remember">Se souvenir de moi</label>
</span>
</p>
</form>
</div>

</body>
</html>
Bonjour,

a écrit :
voir le probleme et me trouver une solution

=> cf règle 8 j'ajouterais qu'on n'est pas non plus une communauté de testeur, mais c'est peut-être un problème de formulation donc je vais te filer un coup de main :

As-tu pensé à mettre un doctype à ta page ? (cf ma signature...)

(au passage si on demande une page en ligne c'est aussi parce que nous n'avons pas les images sur nos machines, donc juste le html ne sert parfois à rien sans les images)
Modifié par InpIxelItrust (23 Aug 2011 - 22:03)
Sujet clos
Aller à