2 pièce(s) jointe(s)
[CSS & MSIE6] Dimensionnement de div
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:
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"> </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:
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.