Bug d'affichage sur IE

**Iaceo** · 02/02/2008, 13h33

Bonjour.

J'ai développé un petit bout de code, mais IE fait des siennes. Il efface certains divs. Etant donné que ma page sera visitée par des utilisateurs d'IE, c'est un peu gênant.

Le problème se situe ici :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table width="300">
<tr>
	<td valign="top">
		<div class="mois"><h2>Janvier 2008</h2>
			<div class="semaineno">
				<div class="jour"><b>01</b> Mardi</div>
			</div>
			<div id="sem2008-01-09" class="semaineMauvais">
				<select class="semaines" onchange="this.blur();" name="post_datas[2008-01-09]">
					<option value="3">Excellent</option>
					<option value="2">Bon</option>
					<option value="1" selected="selected">Mauvais</option>
					<option value="0">Nul</option>
				</select>
				<div class="jour"><b>02</b> Mercredi</div>
				<div class="jour"><b>03</b> Jeudi</div>
				<div class="jour"><b>04</b> Vendredi</div>
				<div class="jourspecial"><b>Inscription</b></div>
				<div class="jour"><b>06</b> Dimanche</div>
				<div class="jour"><b>07</b> Lundi</div>
				<div class="jour"><b>08</b> Mardi</div>
			</div>
			<div id="sem2008-01-16" class="semaineExcellent">
				<div class="jourspecial"><b>Passage Genin</b></div>
				<select class="semaines" onchange="this.blur();" name="post_datas[2008-01-16]">
					<option value="3" selected="selected">Excellent</option>
					<option value="2">Bon</option>
					<option value="1">Mauvais</option>
					<option value="0">Nul</option>
				</select>
				<div class="jour"><b>10</b> Jeudi</div>
				<div class="jour"><b>11</b> Vendredi</div>
				<div class="jour"><b>12</b> Samedi</div>
				<div class="jour"><b>13</b> Dimanche</div>
				<div class="jour"><b>14</b> Lundi</div>
				<div class="jour"><b>15</b> Mardi</div>
			</div>
			<div id="sem2008-01-23" class="semaineBon">
				<select class="semaines" onchange="this.blur();" name="post_datas[2008-01-23]">
					<option value="3">Excellent</option>
					<option value="2" selected="selected">Bon</option>
					<option value="1">Mauvais</option>
					<option value="0">Nul</option>
				</select>
				<div class="jour"><b>16</b> Mercredi</div>
				<div class="jourspecial"><b>Passage Chuunin</b></div>
				<div class="jour"><b>18</b> Vendredi</div>
				<div class="jour"><b>19</b> Samedi</div>
				<div class="jour"><b>20</b> Dimanche</div>
				<div class="jour"><b>21</b> Lundi</div>
				<div class="jour"><b>22</b> Mardi</div>
			</div>
			<div id="sem2008-01-30" class="semaineExcellent">
				<select class="semaines" onchange="this.blur();" name="post_datas[2008-01-30]">
					<option value="3" selected="selected">Excellent</option>
					<option value="2">Bon</option>
					<option value="1">Mauvais</option>
					<option value="0">Nul</option>
				</select>
				<div class="jour"><b>23</b> Mercredi</div>
				<div class="jour"><b>24</b> Jeudi</div>
				<div class="jour"><b>25</b> Vendredi</div>
				<div class="jour"><b>26</b> Samedi</div>
				<div class="jour"><b>27</b> Dimanche</div>
				<div class="jour"><b>28</b> Lundi</div>
				<div class="jour"><b>29</b> Mardi</div>
			</div>
			<div id="sem2008-02-06" class="semaineno">
				<div class="jour"><b>30</b> Mercredi</div>
				<div class="jour"><b>31</b> Jeudi</div>
			</div>
		</div>
	</td>
</tr>
</table>
</body>
</html>

C'est une imbrication de Divs.
Cette imbrication me parait correcte lorsqu'il n'y a pas de CSS...

En ajoutant le CSS :

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
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
 
.mois {
	border: 1px solid #CCCCCC;
	background: #EEEEEE;
	margin: 5px;
	text-align: center;
}
 
.mois h2 {
	margin: 10px 0px 10px 0px;
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #999999;
}
 
select {
	float: right;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	padding: 3px;
}
 
select.semaines {
	padding: 0px;
}
 
.mois .semaineNul {
	background: #CCCCCC;
	padding: 3px;
	color: #FFFFFF;
	margin: 3px;
}
 
.mois .semaineMauvais {
	background: #CC9999;
	padding: 3px;
	color: #FFFFFF;
	margin: 3px;
}
 
.mois .semaineBon {
	background: #99CCCC;
	padding: 3px;
	color: #FFFFFF;
	margin: 3px;
}
 
.mois .semaineExcellent {
	background: #99CC99;
	padding: 3px;
	color: #FFFFFF;
	margin: 3px;
}
 
.mois .semaine {
	background: #FEFEFE;
	padding: 3px;
	color: #999999;
	margin: 3px;
}
 
.mois .semaineno {
	background: #EEEEEE;
	padding: 3px;
	color: #CCCCCC;
	margin: 3px;
}
 
.jour {
	padding: 2px;
	text-align: left;
}
 
.jourspecial {
	padding: 2px 2px 2px 10px;
	text-align: left;
	color: #CC6666;
	background: #FFFFCC;
}
 
.aujourdhui {
	padding: 2px 2px 2px 10px;
	text-align: left;
	color: #666666;
	background: #CCCCCC;
}
.log {
	padding: 0 0 0 20px;
	text-align: left;
	color: #999999;
	font: normal 8px Verdana, Arial, Helvetica, sans-serif;
}

Il s'avère qu'il y a un bug d'affichage (uniquement sur IE). J'ai cherché, j'ai cherché, mais pas trouvé le bug.

J'ai créé une page ici pour vous rendre compte : http://liezon.free.fr/bugs/

Merci d'avance pour votre aide !

**GoldenToad** · 02/02/2008, 13h48

Essai de rajouter un width à 100% pour internet explorer dans ton css pour que ça donne quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.mois {
	border: 1px solid #CCCCCC;
	background: #EEEEEE;
	margin: 5px;
	text-align: center;
 
       /* Ajout */
       width: 100%;
}

**Iaceo** · 02/02/2008, 14h40

Ca n'a rien changé du tout

Edit :
Ah autant pour moi, c'était bien ça le problème, mais sur les jours aussi ^^

Merci beaucoup

Bug d'affichage sur IE

CSS

Discussions similaires

Partager

Partager