Aller au contenu

Problème de <select> sous firefox


f.lionel

Sujets conseillés

Bonsoir,

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

<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>

Et la partie du css plus particulièrement utilisée:

#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;
}

Lien vers le commentaire
Partager sur d’autres sites

Je ne suis pas sur que la balise select soit une balise en ligne, mais une balise en bloc, auquel cas elle ne peut être intégrée dans une balise en ligne comme la bvalmise span.

Essaye de mettre ton select dans un div, ou plus simplement de mettre une id ou un class à ton select. l'attribut size donnera un équivalent en largeur de caractère, et ne gérera pas la hauteur, la propriété CSS height le fera...

A voir de ce côté, valide via W3C pour voir à propos de la balise select !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...