différence IE FF - Pb de margin

**le Daoud** · 10/07/2007, 17h27

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

**damjal** · 10/07/2007, 22h07

Salut,

Voici peut-être une piste pour toi : fusion de marge

mais dans un premier temps, il faut partir d'une page valide, avec le validateur, tu as plusieurs erreurs :

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
   1.  Error  Line 7 column 6: required attribute "type" not specified.
 
      <style>
 
      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
 
      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
 
      ✉
   2. Error Line 74 column 62: end tag for "input" omitted, but OMITTAG NO was specified.
 
      ...input type="button" class="button" value="Ajouter"></td>
 
      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
 
      ✉
   3. Info Line 74 column 6: start tag was here.
 
      		<td><input type="button" class="button" value="Ajouter"></td>

**le Daoud** · 12/07/2007, 09h48

Merci pour ta réponse, mais mon pb persiste.
En résumé, mon bloc central sur FF fait X pixels, alors que sur IE il fait X + le margin. Est-ce normal, cela peut-il être corrigé ?

Merci

**Candygirl** · 12/07/2007, 10h48

Envoyé par le Daoud

En résumé, mon bloc central sur FF fait X pixels, alors que sur IE il fait X + le margin. Est-ce normal, cela peut-il être corrigé ?

Tu regardes sous IE6 ?
Sur IE6, la déclaration xml

Code :

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

<?xml version="1.0"?>

l'empêche de passer en mode standard (il me semble quec'est corrigé sur IE7) et IE6 reste donc en mode quirks, d'où l'utilisation du model de boîte de Microsoft.

Si tu traites ton xhtml comme du html et non comme xml (comme la majorité des sites) tu peux le virer sans autre.

**le Daoud** · 12/07/2007, 13h51

thxs

différence IE FF - Pb de margin

CSS

Vue hybride

Discussions similaires

Partager

Partager