Bonjour,

Je rencontre un problème sur la mise en page d'un site. Il s'agit d'un classique "header/menu gauche/centre/footer". D'habitude je fais cela avec des tableaux. Cette fois, je décide de prendre le temps, et de mettre en place un système avec des div, mais je rencontre quelques soucis.
J'ai une structure récupérée. Dans le div "centre" je mets un "table" prenant 100% de l'espace. Sur firefox, ça marche très bien, alors que sur IE, le tableau déborde sur la droite. J'ai pu vérifier en fait qu'il ajoutait l'équivalent du margin déterminé dans le div "centre".

Voici le html :

Code : 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
 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Liquid Layout: Two Column Left Navigation [# 2]</title>
<LINK href="xxx/style.css" type=text/css rel=stylesheet>
</head>
<body>
  <div id="conteneur">
	  <div id="header">
		  blah
	  </div>
	  <div id="gauche">		
                 blah
	  </div>
	  <div id="centre">
	  <table width="100%">
          <tr>
            <td><b>NOM</b></td>
            <td><b>PRENOM</b></td>
	    <td><b>LOGIN AD</b></td>
	    <td><b>MATRICULE</b></td>
	    <td><b>ADD</b></td>
         </tr>
          <tr>
            <td>DUPONT</td>
		<td>Pierre</td>
		<td>pdupont</td>
		<td>804xxx</td>
		<td><input type="button" class="button" value="Ajouter"></td>
	  </tr>
        </table>
  	</div>
 
 
	  <div id="pied"><b>Demater v0.1b </b></div>
</div>
 
 
  </body>
  </html>
Et le css :
Code : 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
body {
font-family: Times, Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0;
padding: 0;
}
#header {
height: 150px;
background-color: #A5C45C;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#A5C45C;
}
#centre {
background-color:#FFFFFF;
margin-left: 153px;
}
#gauche {
position: absolute;
left:0;
width: 153px;
padding-left:2px;
}
#pied {
height: 30px;
background-color: #6A7F37;
padding-top:5px;
padding-left:2px;
}
 
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
p {margin: 0 0 10px 0;}
Auriez-vous une piste ?

Merci