Problème de compatibilité safari css pour formulaire
Bonjour,
Je suis sur la mise en page d'un formulaire et je n'arrive pas à avoir le rendu voulu sur safari je vous met mon code et un screen shot des rendu sur firefox et sur safari:
ça rend bien sur firefox:
http://dev.remedeo.fr/armoire/images/firefox.jpg
par contre sur safari les select me posent problème(ça rend la même chose sur ie):
http://dev.remedeo.fr/armoire/images/safari.jpg
voici le html:
Code:
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
|
<form method='post' action='add_infos.php' enctype="multipart/form-data" >
<ol>
<li>
<span>jajoute</span>
</li>
<li>
<label for="name">
<span>Pseudo: </span>
<input class="name" type="text" name="name" id="name" size="10" maxlength="15" />
</label>
</li>
<li>
<label for="cp">
<span>Code postal: </span>
<input class="postal" type="text" name="cp" id="cp" size="5" maxlength="5" />
</label>
</li>
<li>
<label for="adult">
<span>Nb d'adultes: </span>
<select class="nb" name="adult" id="adult">
<?php for($i=0; $i < 5; $i++){ echo "<option value='".$i."'>".$i."</option>" ; }?>
<option value=">5">>5</option>
</select>
</label>
</li>
<li>
<label for="child">
<span>Nb d'enfants: </span>
<select class="nb" name="child" id="child">
<?php for($i=0; $i < 5; $i++){ echo "<option value='".$i."'>".$i."</option>" ; }?>
<option value=">5">><span>5</span></option>
</select>
</label>
</li>
<li>
<label for="room">
<span>Pièce: </span>
<select class="room" name="room" id="room">
<option value="la Chambre">la Chambre</option>
<option value="la Salle de Bain">la Salle de Bain</option>
<option value="les Toilettes">les Toilettes</option>
<option value="la Cuisine">la Cuisine</option>
<option value="le Salon">le Salon</option>
</select>
</label>
</li>
<li>
<label for="photo">
<input type="hidden" name="MAX_FILE_SIZE" value="2097152">
<input class="photo" type="file" name="photo">
</label>
</li>
<li>
<input type="submit" value="Afficher" class="submit"/>
</li>
</ol>
</form> |
voici le css:
Code:
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
|
form {
margin: -20px auto;
background-color: #36A6FF;
color: #36A6FF;
border: 1px solid #fff;
-webkit-border-radius:4px;
-moz-border-radius: 4px;
border-radius:4px;
font-size: 14px;
width:300px;
height: 300px;
}
ol {
margin-left: -29px;
}
input, select {
margin: 0 5px;
color: #36A6FF;
font-weight: bold;
height: 35px;
}
input.name {
padding-left:61px;
width: 275px;
}
input.postal {
padding-left:86px;
width: 275px;
}
select.nb {
padding-left:90px;
padding-top: 3px;
width: 130px;
}
select.room {
width: 275px;
}
input.photo {
}
input.submit {
margin: 0 auto;
}
li {
position: relative;
display: inline-block;
margin: 0 0 10px;
}
label span {
position: absolute;
left: 10px;
top: 10px;
} |
