Discussion :

[baggie]

Bonjour,

mon site fonctionne bien sur la plupart des navigateurs, sauf sur IE6 (mais ok pour les versions plus récentes d'IE). Et il faut qu'il fonctionne sous IE6 vu qu'il y a encore des gens sous cette version. Bref, une image est en pièce jointe pour illustrer mon problème.

J'ai un div #general, contenant trois divs : #header, #menu, #contenu.

Et sous IE6, le div #contenu (le cadre blanc sur l'image donc) est décalé vers le bas, au lieu d'être au niveau de la ligne rouge comme sur les autres navigateurs.

Pouvez-vous me dire ce que IE6 n'aime pas dans ma CSS, et s'il y a quelque chose à rajouter dans le code pour que ça fonctionne ?

Mon code 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
 
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#00479D;
	background-color:#E0F7FE;
	text-align:justify;
	margin:auto;
}
 
#general {
	width:90%;
	height:100%;
	background-color:#00479D;
	margin:auto;
	overflow:hidden;
}
 
#header {
	margin-top:0px;
	width:100%;
}
 
#menu {
	float: left;
	margin-top:9px;
	width:8%;
}
 
#contenu {
	margin-right:2px;
	background-color:#FFFFFF;
	padding: 10px 10px 10px 10px;
	float: right;
	width: 79%;
}

Mon code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="general">
      <div id="header">
      </div>
 
      <div id="menu">
      </div>
 
      <div id="contenu">
      </div>
</div>

[ledisciple]

En essayant : vertical-align:top ?

Code :

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

1
2
3
4
5
6
7
8
9
10
 
#contenu {
display: table-cell;
vertical-align:top
margin-right:2px;
background-color:#FFFFFF;
padding: 10px 10px 10px 10px;
float: right;
width: 79%;
}

[Macmillenium]

Bonjour,

Il n y a pas de problème avec le code que tu donnes, as-tu une page en ligne stp ?

[baggie]

Bien sûr : lien ici
Un copain m'a dit que sous IE 6 ça bugguait, mais je ne vois pas pourquoi (je testerai le vertical-align dès que je peux)

[pop_up]

En consultant ton lien, la seule différence majeure que je constate entre FF et IE6 c'est que si tu redimensionnes ta fenêtre et que tu descends environ en dessous de 600px (je dis ça au hasard) le contenu passe en dessous.

[baggie]

J'ai repéré ça aussi, à partir d'une certaine résolution ça le fait :/

[pop_up]

je pense que ce phénomène est du au fait que tu ais une largeur en % pour ta div #contenu et que tu ais un padding et un margin en pixel. Du coup, ton bloc fera au total 79%+10px(a gauche) + 10px(a droite) + 2px (a droite)

[baggie]

Ah je n'avais pas pensé à ça de cette manière en effet. Merci !