Positionnement des blocs DIV sous IE6

**elekaj34** · 29/11/2007, 16h22

Bonjour,

Etant en train de réaliser un site, je me casse la tête pour avoir une présentation potable sous IE6. J'ai résolu la plupart des défaut a grand coup de modif des styles, commentaire etc ...

Mais là y a un truc que je pige pas

Voici d'abord le HTML (en réalité SPIP)

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
	<body>
		<div id="mgs_page">
			<div id="mgs_tete">
				<!-- Tete de page -->
			</div>
 
			<!-- Bloc central avec les menus et le contenu -->
			<div class="mgs_cadre01">
				<div id="mgs_navigation">
					<!-- Bloc contenant le menu -->
				</div>
 
				<div class="principal">
			        	<!-- Bloc du contenu principal -->
				</div>
			</div>
 
	                <div class="mgs_pied">
                          	<!-- Bloc de pied de page -->
                        </div>
		</div>
	</body>

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
42
#mgs_page {
	width: 980px;
	color: #444;
	font-size: 1em;
	margin-right: auto;
	margin-left: auto;
	background-color: #fafafc;
}
 
#mgs_tete {
	width: 980px;
	border-style: none;
	margin: 0px;
	padding: 0px;
	background-color: #fafafc;
}
 
.mgs_cadre01 {
	border: 1px solid #fafafc;
	padding: 0px;
	background-color: #fafafc;
	overflow: hidden;
}
 
#mgs_navigation {
	width: 228px;
	margin: 0px;
	float:left;
}
 
.mgs_pied {
	font-size: 0.8em;
	text-align: center; 
	padding: 8px;
	margin: 10px 0px;
	border-top: 1px dotted #ebaa0e;
}
 
.mgs_principal {
	padding: 0px;
	margin-left: 215px;
}

Mon problème, c'est que sous IE6 (pas testé avec IE7), le pied de page se retrouve systématiquement sous le contenu principal (même si celui ci est moins haut que le bloc de navigation). Alors que sous FireFox 2, le pied de page se retrouve en dessous le bloc de navigation si celui est plus haut que le bloc principal.

J'ai beau tourner dans tous les sens, soit c'est OK avec Firefox et pas IE6 ou vice versa

Cordialement,

[edit]Désolé, j'avais oublié le CSS[/edit]

Elekaj

**Kerod** · 29/11/2007, 18h18

C'est pas ce que tu veux ?

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
<div id="mgs_page">
            <div id="mgs_tete">
                   Tete
            </div>
 
            <div class="mgs_cadre01">
                <div id="mgs_navigation">
                    navigation
                </div>
 
                <div class="principal">
                    contenu principal    
                </div>
            </div>
             <div class="mgs_pied">
                   pied           
            </div>
        </div>

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
            #mgs_page {
    width: 980px;
    color: #444;
    font-size: 1em;
    margin-right: auto;
    margin-left: auto;
    background-color: #fafafc;
}
 
#mgs_tete {
    width: 980px;
    border-style: none;
    margin: 0px;
    padding: 0px;
    background-color: #fafafc;
}
 
.mgs_cadre01 {
    border: 1px solid #fafafc;
    padding: 0px;
    background-color: #fafafc;
    overflow: hidden;
}
 
#mgs_navigation {
    width: 228px;
    margin: 0px;
    float:left;
}
 
.mgs_pied {
    font-size: 0.8em;
    text-align: center; 
    padding: 8px;
    margin: 10px 0px; 
    clear: both;
    border-top: 1px dotted #ebaa0e;
}
 
.mgs_principal {
    padding: 0px;
    margin-left: 215px;
}

Positionnement des blocs DIV sous IE6

Positionnement en CSS

Discussions similaires

Partager

Partager