28220 sujets

CSS et mise en forme, CSS3

Je souhaite aligner verticalement mon select dans un paragraphe.
Après avoir lu les conseils pour aligner verticalement des élements dans un bloc, j'ai constaté que la méthode qui me convenait le mieux était celle du line-height. Voici donc mon code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
   <title>Mon titre</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <meta http-equiv="Content-Style-Type" content="text/css"/>
   <meta http-equiv="Content-Language" content="fr">
   <meta http-equiv="pragma" content="no-cache" />
</head>
<style>
p{
   background-color:#99FF66;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   height: 7em;
   line-height:7em;
}
</style>
<body>
   <form name="test" id="test" action="testform.htm" method="post">
      <p>
         <label>Select 1</label>
         <span>
	<select name="sel" id="sel">
	   <option value="0">val 0</option>
	   <option value="1">val 1</option>
	   <option value="2">val 2</option>
	</select>
        </span>
      </p>
   </form>
</body>
</html>


L'alignement fonctionne correctement avec firefox. Par contre, internet explorer me laisse le texte et le select en position haute. Si en revanche je remplace mon <select> par un texte classique, le problème disparait. J'en appelle à votre expérience pour me sortir de ce problème Smiley cligne
Modifié par mephisto (20 Feb 2006 - 13:40)