je suis en train de créer un formulaire et je ne veux pas utiliser de structure avec des tableaux. Uniquement du css.
J'ai donc créé ma structure qui marche bien sur l'ensemble des navigateurs et j'en étais assez content ... jusqu'à ce que je tente de mettre un champ select.
Et là patatrac ... ca marche partout sauf sur firefox qui ne prend pas en compte la hauteur du champ et qui fait comme s'il ne mesurait qu'une ligne en gros ...
Je vous envoie le code pour que si vous connaissez ce problème et que vous disposiez de 5 min vous puissiez m'aider.
Merci d'avance
CODE
<div id="formulaire">
<form action="/quickform/index.php" method="post" name="" id="">
<fieldset class="field"><legend> Vos coordonnées : </legend>
<div class="question">
<span class="label">*Votre mail</span>
<span class="saisie"><input name="mail1" type="text" /></span>
</div>
<div class="question">
<span class="label">*Confirmez votre mail</span>
<span class="saisie"><input name="mail2" type="text" /></span>
</div>
<div class="question">
<span class="label">Voitures :</span>
<span class="saisie">
<select name="__cars[]" multiple="multiple" size="10">
<option value="dodge">Dodge</option>
<option value="chevy">Chevy</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="porsche">Porsche</option>
<option value="kia">Kia</option>
<option value="subaru">Subaru</option>
<option value="mazda">Mazda</option>
<option value="isuzu">Isuzu</option>
</select>
</span>
</div>
<div class="question">
<span class="label"></span><span class="saisie"></span>
</div>
<div class="bouton"><input type="submit" value="Soumettre"></div>
</form>
</div>
<form action="/quickform/index.php" method="post" name="" id="">
<fieldset class="field"><legend> Vos coordonnées : </legend>
<div class="question">
<span class="label">*Votre mail</span>
<span class="saisie"><input name="mail1" type="text" /></span>
</div>
<div class="question">
<span class="label">*Confirmez votre mail</span>
<span class="saisie"><input name="mail2" type="text" /></span>
</div>
<div class="question">
<span class="label">Voitures :</span>
<span class="saisie">
<select name="__cars[]" multiple="multiple" size="10">
<option value="dodge">Dodge</option>
<option value="chevy">Chevy</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="porsche">Porsche</option>
<option value="kia">Kia</option>
<option value="subaru">Subaru</option>
<option value="mazda">Mazda</option>
<option value="isuzu">Isuzu</option>
</select>
</span>
</div>
<div class="question">
<span class="label"></span><span class="saisie"></span>
</div>
<div class="bouton"><input type="submit" value="Soumettre"></div>
</form>
</div>
Et la partie du css plus particulièrement utilisée:
CODE
#formulaire{
width: 98%;
border: 0px;
padding: 5px;
margin: 0px auto;
}
form .label {
float: left;
width: 48%;
text-align: right;
height: 2.2em;
font-weight: normal;
}
form .saisie {
float: right;
width: 48%;
text-align: left;
height: 2.2em;
}
.field{
clear: both;
width: 95%;
padding-bottom: 0px;
margin-bottom: 0px;
/*font-weight: bold;*/
}
legend {
font-weight: bold;
}
.bouton{
clear: both;
text-align:center;
background-color:#ace;
}
width: 98%;
border: 0px;
padding: 5px;
margin: 0px auto;
}
form .label {
float: left;
width: 48%;
text-align: right;
height: 2.2em;
font-weight: normal;
}
form .saisie {
float: right;
width: 48%;
text-align: left;
height: 2.2em;
}
.field{
clear: both;
width: 95%;
padding-bottom: 0px;
margin-bottom: 0px;
/*font-weight: bold;*/
}
legend {
font-weight: bold;
}
.bouton{
clear: both;
text-align:center;
background-color:#ace;
}