Compatibilité IE7 label div textarea [Résolu]

seaweal · 15/06/2011, 10h02

Bonjour,

Aprés avoir longuement googlé mon souci,je me décide à poster car je sèche com-plè-te-ment.

J'ai un formulaire de contact qui fonctionne parfaitement sur FF chrome et ie 9 mais qui bug sévère sous ie 7. Une partie du code html se retrouve dans le textarea! Ce pb est visible sur les images jointes.

Voici le code du formulaire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="css/contact.css" />
</head>
 
<body>
<div id="contactForm">
	<div id="contactTitle">Contacter http://www.annonces50.fr</div>
    <div id="contactContent">
    	<!-- A masquer pour le formulaire de contact standard -->
 
    	<div id="contactDetailAnnonce">
 
        	<div class="formLeft">Titre de l'annonce </div>
            <div class="formRight">Programme neuf 50230 AGON COUTAINVILLE - Appartements TYPE 2 dans R&eacute;sidence de tourisme</div>
            <div class="formLeft">Localisation </div>
            <div class="formRight"> </div>
            <hr class="separation" />
            <hr />
 
        </div>
        <!-- fin détail de l'annonce -->
 
    <form method="post" action="/contact.php" name="itemForm" id="itemForm">
 
<input type="hidden" name="ad_owner" value="Annonces50.fr">
<input type="hidden" name="commune" value="">
<input type="hidden" name="user_id" value="28">
<input type="hidden" name="id" value="31980152">
<input type="hidden" name="contact" value="1">
<div class="formLeft">
        <label for="contact-name">*Nom :</label>
        <input ype="text" name="contact_name" value="" id="contact-name" class="contact-input"  />
         </div>
<div class="formRight">
        <label for="contact-firstname">Pr&eacute;nom :</label>
        <input type="text" id="contact-firstname" class="contact-input" value="" name="firstname" />
        </div>
        <div class="formLeft">
        <label for="contact-phone">T&eacute;l&eacute;phone :</label>
        <input type="text" id="contact-phone" class="contact-input" name="phone" value="" />
 
        </div>
        <div class="formRight">
        <label for="contact-email">*Email:</label>
        <input type="text" name="contact_email" value="" id="contact-email" class="contact-input"  />
        </div>
        <div class="formCenter">
        <label>&nbsp;</label>
        <select name="subject" tabindex="106" >
 
                <option name="subject" value="0">Choisissez un message prédéfini</option>
                <option name="subject" value="visite"   >Demande de visite</option>
                <option name="subject" value="infos"   >Demande d'informations complémentaires</option>
                <option name="subject" value="autre" >Autre demande</option>
        </select>
        </div>
        <div class="formCenter">
 
        <label>&nbsp;</label>
        <textarea id="contact-message" class="contact-input"  name="contact_message" cols="40" rows="4"  ">  </textarea>
        </div>
        <div class="formLeftImage">
        <label>Vérification:</label>
        <img src="val_img.php" /></div>
        <div class="formRightImage">
        <label for="validate_sign">*Recopier le code:</label>
 
        <input type="text" id="validate_sign" class="contact-input" name="validate_sign" />
        </div>
        <div class="formCenter">
        <label>&nbsp;</label>
        <input type="checkbox" id="contact-cc" name="copie" value="1"    /> <span class="contact-cc">Envoyez moi une copie</span>
        </div>
        <div class="formCenter">
        <label></label>
 
        <button  type="submit" NAME="submit" VALUE="Envoyer" class="contact-send contact-button" >Envoyer</button>
        <button type="submit" class="contact-cancel contact-button" onclick="window.parent.Shadowbox.close()">Fermer cette fenêtre</button>
        <span class="mandatory">*Champs obligatoires</span>
        </div>
    </form>
 
    </div>
</div>
</body>
 
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
body                                            {  center top no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:black;}
.separation                                     { clear:both; visibility:hidden; margin:0; padding:0; height:1px; }
 
label           { display:block; width:80px; text-align:right; padding:4px 0 0; float:left;}
 
#contactForm { width:580px; height:490px; background: #A50000 url(../images/background-form-contact.gif) left top repeat-x; padding:10px; margin:0 auto }
#contactForm #contactTitle { font-size:24px; color:white;}
#contactForm #contactContent { background: white url(../images/background-annonces.jpg) right bottom no-repeat; margin:10px 0 0; padding:10px; height:430px;}
#contactForm #contactContent #contactDetailAnnonce { clear:both; font-size:14px; margin:0 0 15px 0;}
#contactForm #contactContent #contactDetailAnnonce .formLeft { margin:0 0 5px 15px; width:160px;}
#contactForm #contactContent #contactDetailAnnonce .formRight { margin:0 0 5px 0; width:380px; font-weight:bold;}
 
#contactForm #contactContent .formLeft { width:50%; float:left; margin:0 0 5px 0;}
#contactForm #contactContent .formRight { width:50%; float:right; margin:0 0 5px 0;}
#contactForm #contactContent .formLeftImage { width:45%; float:left; margin:0 7px 5px 0;}
#contactForm #contactContent .formLeftImage img { height:19px;}
#contactForm #contactContent .formRightImage { width:53%; float:right; margin:0 0 5px 0;}
#contactForm #contactContent .formRightImage label { width:90px;}
#contactForm #contactContent .formCenter{ width:100%; clear:both; margin:0 0 5px 0;}
#contactForm #contactContent label { display:block; margin:0 5px 0 0;}
#contactForm #contactContent input { display:block; float:left; width:188px;}
#contactForm #contactContent select { display:block; width:475px;}
#contactForm #contactContent textarea { display:block; width:468px; height:150px; max-width:468px; max-height:150px;}
#contactForm #contactContent input#contact-cc { width:20px; margin-left:0;}
#contactForm #contactContent span.contact-cc { display:block; padding:3px 0 0 0;}
#contactForm #contactContent span.mandatory { float:left; padding:7px 0 0 0;}
#contactForm #contactContent button.contact-button { display:block; float:left; width:105px; height:34px; margin:0 10px 0 0; border:none; background:transparent; font-weight:bold;}
#contactForm #contactContent button.contact-send { background:url(../images/btn-inscription.png) left top no-repeat; color:white;}
#contactForm #contactContent button.contact-cancel { background:url(../images/btn-inscription-grey.png) left top no-repeat;}

J'ai déjà essayé de remplacer les "for" par des "htmlFor" dans le code html mais cela ne change rien.

Toute aide est grandement apprécié, je suis complètement sec.
D'avance merci aux gurus qui prendront le temps de se pencher sur ce pb!

NoSmoking · 15/06/2011, 10h38

Bonjour,
sur la ligne suivante il y a une " en trop qui ouvre une chaine

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea id="contact-message" class="contact-input" name="contact_message" cols="40" rows="4" "> </textarea>

PS: merci d'utiliser les balises de code -> bouton #

seaweal · 15/06/2011, 10h57

Merci NoSmoking, ça marche, c'est ça!

15/06/2011, 10h57	#3
seaweal Invité de passage Administrateur systèmes et réseaux Inscription : juin 2011 Messages : 2 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Administrateur systèmes et réseaux Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : juin 2011 Messages : 2 Points : 0 Points : 0	ok! Merci NoSmoking, ça marche, c'est ça!
	00

15/06/2011, 10h38	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 774 Points : 4 774	Bonjour, sur la ligne suivante il y a une " en trop qui ouvre une chaine Code : Sélectionner tout - Visualiser dans une fenêtre à part <textarea id="contact-message" class="contact-input" name="contact_message" cols="40" rows="4" "> </textarea> PS: merci d'utiliser les balises de code -> bouton #
	30

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email