[CSS & MSIE6] Dimensionnement de div

**Floréal** · 02/04/2007, 18h17

Bonjour,
Voila mon problème, Je développe une application J2EE/JSP de gestion d'incident.
J'ai pour cela choisi une interface web, mais voila le problème, je dois développer indifféremment pour un navigateur Internet Explorer 6 ou Mozila Firefox <= 1.5.0.0. Comme vous pouvez le voir sur les images ci-jointes, je n'ai aucun problème avec Firefox, mais avec internet Explorer j'obtiens un résultat très insatisfaisant. Voici le code html généré:

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Gestion des incidents - Types de Incident</title>
		<link rel="stylesheet" type="text/css" href="styles/main.css" charset="ISO-8859-1"/>
		<script type="text/javascript" src="scripts/default.js"></script>
 
	</head>
	<body>
		<div id="header"><img src="images/titre.jpg"/></div>
		<div id="menu">
			<h3>Menu</h3>
			<i>Incidents</i>
			<ul>
				<li><a href="nouvelincident.htm">Nouveau</a></li>
 
				<li><a href="rechercheincident.htm">Rechercher / Editer</a></li>
			</ul>
			<i>Etats</i>
			<ul>
			</ul>
			<i>Divers</i>
			<ul>
 
				<li><a href="typeincident.htm">Types d'incidents</a></li>
				<li><a href="typeimpact.htm">Types d'impacts</a></li>
				<li><a href="plateforme.htm">Plateformes</a></li>
				<li><a href="typejeu.htm">Types de jeu</a></li>
				<li><a href="soustypejeu.htm">Sous-types de jeu</a></li>
			</ul>
 
		</div>
		<div id="main">
		<h3>Types de Incident</h3>
			<div id="liste">
				<table>
					<tr>
						<td valign="top">
							<fieldset>
 
								<legend>liste</legend>
								<div id="enum">
								<table>
									<tr>
										<th width="100">Nom</th>
										<th width="32">&nbsp;</th>
									</tr>
 
									<tr>
 
										<td width="100">PEM
										</td><td align="center"><a href="javascript:edit(1, 'PEM')"> <img src="images/icons/pencil.png" alt="Editer"/></a><a href="javascript:remove(1);"><img src="images/icons/cross.png" alt="Srupprimer"/></a></td>
									</tr>
 
									<tr>
										<td width="100">IE
										</td><td align="center"><a href="javascript:edit(2, 'IE')"> <img src="images/icons/pencil.png" alt="Editer"/></a><a href="javascript:remove(2);"><img src="images/icons/cross.png" alt="Srupprimer"/></a></td>
									</tr>
 
									<tr>
										<td width="100">Programmé
										</td><td align="center"><a href="javascript:edit(3, 'Programmé')"> <img src="images/icons/pencil.png" alt="Editer"/></a><a href="javascript:remove(3);"><img src="images/icons/cross.png" alt="Srupprimer"/></a></td>
 
									</tr>
 
								</table>
								</div>
							</fieldset>
							</td>
							<td valign="top">
								<form method="post" name="fajout">
									<fieldset>
										<legend>Ajouter</legend>
 
										Nom <input type="text" name="nom"
											onkeydown="javascript:enableIfNotEmpty(window.document.fajout.nom, window.document.fajout.bvalid);"
											onkeyup="javascript:enableIfNotEmpty(window.document.fajout.nom, window.document.fajout.bvalid);"/>
										<input type="hidden" name="action" value="ajouter"/>
										<input type="submit" value="Ajouter" disabled="disabled" name="bvalid"/>
									</fieldset>
								</form>
								<form method="post" name="fmodif">
									<fieldset>
										<legend>Modifier</legend>
 
										Nom <input type="text" name="nom" disabled="disabled"
											onkeydown="javascript:enableIfNotEmpty(window.document.fmodif.nom, window.document.fmodif.bvalid);"
											onkeyup="javascript:enableIfNotEmpty(window.document.fmodif.nom, window.document.fmodif.bvalid);"/>
										<input type="hidden" name="id"/>
										<input type="hidden" name="action" value="modifier"/>
										<input type="submit" value="Modifier" name="bvalid" disabled="disabled"/>
									</fieldset>
								</form>
								<form method="post" name="fsuppr">
									<input type="hidden" name="id"/>
 
									<input type="hidden" name="action" value="supprimer"/>
								</form>
							</td>
						</tr>
					</table>
				</div>
		</div>
	</body>
</html>

ainsi que ma feuille de Style:

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@CHARSET "ISO-8859-1";
 
td {
	font-family: sans-serif;
	font-size: 10pt;
}
 
th {
	font-size: 10pt;
	color: #FFFFFF;
	background-color: #004286;
	font-weight: bold;
	text-align: center;
}
 
ul, li {
	margin: 5;
	padding: 0;
	list-style-type: none;
}
 
a:active, a:visited, a:link {
	text-decoration: none;
	color: #004286;	
}
 
a:hover {
	text-decoration: none;
	color: #5384AD;
}
 
#header {
	position: absolute;
	height: 80px;
	width: 500px;
	left: 0;
	top: 0;
}
 
#menu {
	font-size: 10pt;
	font-family: sans-serif;
	position: absolute;
	top: 80px;
	left: 0px;
	width: 150px;
	margin-left: 10px;
}
 
#main {
	font-size: 10pt;
	font-family: sans-serif;
	position: absolute;
	top: 80px;
	left: 150px;
	bottom: 20px;
	right: 20px;
	overflow: auto;
}
 
#liste {
	position: absolute;
	top: 40px;
	left: 20px;
}
 
#modify {
	position: absolute;
}
 
#modify input {
	-moz-border-radius: 6px;
	border-color: #004286;
}
 
#enum {
}
 
#enum div{
	height: 500px;
	overflow: auto;
}
 
#enum table{
	-moz-border-radius: 6px;
	background-color: #004286;
}
 
#enum th{
	-moz-border-radius: 6px;
    font-size: 10pt;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #5384AD;
	vertical-align:bottom;
}
 
#enum img{
	border: 0px;
}
 
#enum td {
	font-family: sans-serif;
	background-color: #FFFFFF;
	font-size: 10pt;
}

Le problème se situe au niveau le la balise <div id="main"> (donc dans la section #main du css).
Quelqu'un saurait il me dire par quoi je dois remplacer mon code CSS?
Je vous remercie par avance.

[CSS & MSIE6] Dimensionnement de div

Dimensionnement en CSS

Mode arborescent

Discussions similaires

Partager

Partager