Compatibilité IE7 label div textarea

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

Compatibilité IE7 label div textarea

CSS

Mode arborescent

Discussions similaires

Partager

Partager