Problème scroll horizontal avec firefox

Bonjour,

J'aurais besoin de votre aide pr l'habillage d'un formulaire en css ..
Je l'ai testé sous I.E 6 ,5.5 , 5.01 .. opéra, mozilla et ça fonctionne..

ça donne par contre ça sous firefox et netscape :


1. Sous firefox , dans le champ texte, ça scroll en largeur.. Il n' y a pas donc pas de retour à la ligne..
2. Sous Netscape les labels n'apparaissent même pas.. ;(

peut-être pourrez vous m'expliquer ce que je peux ajouter ou ce qui ne va pas dans ce script..

merci bcp d'avance,


Flux37

voici lex html :

CODE<form action="mailto:contact_AT_casasud-deco.com" method="post">
<div class="row"><label class="col1">Nom</label>
<span class="col2"><input name="name" class="input" type="text" id="name" size="39" tabindex="1" /></span>
</div>
<div class="row"><label class="col1">E-mail</label>
<span class="col2"><input name="email" class="input" type="text" id="email" size="39" tabindex="2" /></span>
</div>
<div class="row"><label class="col1">Objet de la demande </label>
<span class="col2"><input name="website" class="input" type="text" id="website" size="39" tabindex="3" /></span>
</div>
<div class="row"><label class="col1">Message</label>
<span class="col2comment">
<textarea cols="60" maxlength="60"class="textarea" rows="5" name="comment" id="textarea" tabindex="4" ></textarea>
</span></div>
<div align="right" class="submit"><input type="image" src="/images/bt_precommande.gif" alt="send" width="178" height="22" border="0" />
</div>
</form>

et voilà le css


CODEform {
width: 350px;
}

.col1 {

font-family: arial, helvetica, sasn serif;
font-size: 0.8em;
font-weight : normal;
color: #382215;
text-align: left;
width: 90px;
height: 31px;
margin-top: 5;
margin-right: 10;
float: left;
background: url(../images/) no-repeat;

}

.col2 {

width: 250px;
height: 31px;
display: block;
float: left;
margin: 0;
background: url(../images/) no-repeat;
}

.col2comment {

width: 50px;
height: 110px;
margin: 0;
display: block;
float: left;
background: url(../images/) no-repeat;

}

.col1comment {

font-family: arial, helvetica, sasn serif;
font-size: 0.8em;
font-weight: normal;
color: #382215;
text-align: left;
width: 250px;
height: 98px;
float: left;
display: block;
background: url(../images/) no-repeat;

}

div.row {

clear: both;
width: 350px;
}

.submit {

height: 29px;
width: 350px;
background: url(..images/) no-repeat;
padding-top: 5px;
padding-right:20px;
clear: both;
}

.input {

background-color: #fff;
font: 0.7em Arial, Helvetica, sans-serif;
color: #382215;
margin: 4px 0 5px 8px;
padding: 1px;
border: 1px solid #ccc;
}

.textarea {

border: 1px solid #ccc;
background-color: #fff;
font: 11px/14px Arial, Helvetica, sans-serif;
color: #382215;
margin: 4px 0 5px 8px;

}

J'ai eu le même souci, sujet déjà évoqué par :

> Misange > Forum Alsacréations : CSS et Standards Web · HTML, XHTML, sémantique web · [résolu]TextArea : différences entre firefox et IE

> Ghusse > Forum Alsacréations : CSS et Standards Web · CSS et mise en forme · Bug de textarea sur IE : la taille change lorsqu'on entre du texte

A Priori, le scroll en largeur ne gêne pas au moment de la rédaction car les retours à la ligne s'effectuent tout de même au bon endroits. Il semblerait que IE coupe les mots pour insérer un retour à la ligne tandis que firefox n'insère un retour à la ligne qu'entre deux mots (sans couper) (Je remercie d'ailleurs au passage chrisz qui m'a aidé à saisir cette subtilité).
Modifié par Fogia (07 Jul 2006 - 19:35)

Merci bcp pr ces précisions ..
bcp de temps passé pr rien en somme