Aller au contenu

Formulaire contact. problème compatibilité ?


flux37

Sujets conseillés

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 :

<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

form {
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;

}

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