Discussion :

[telodo]

Bonjour,


J'ai un petit problème de compatibilité avec mon code CSS afin d'adapter celui-ci à Internet Explorer. Je n'ai pas trouvé comment faire pour "tricher" et le rendre compatible.

Donc mon problème se situe au niveau du Sidebar et Content. Sous IE le Sidebar vient masquer le Content....


Fichier 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
/********** BODY **********/
 
html, body
{
	background-color: #E6E6E6;
	border: none;
	height: 100%;
	margin: 0;
	padding: 0;
}
 
/********** CONTAINER **********/
 
#container
{
	background-color: white;
	border: 1px solid black;
	border: 1px solid black;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	min-height: 600px;
	width: 960px;
}
 
/********** HEADER **********/
 
#header
{
	height: 92px;
}
 
/********** SIDEBAR **********/
 
.sidebar
{
	background-color: white;
	border-top: 1px solid black;
	height: 508px;
	overflow: auto;
	position: absolute;
	width: 260px;
}
 
/********** CONTENT **********/
 
.content
{
	background-color: white;
	border-left: 1px solid black;
	border-top: 1px solid black;
	margin-left: 260px;
	min-height: 508px;
}
 
/********** FOOTER **********/
 
#footer
{
	background-image: url("img/copyright.png");
	border-top: 1px solid black;
	height: 30px;
	position: relative;
}

Fichier HTML (structure du site)

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
 
<div id="container">
 
	<div id="header"><img src="img/header.png" alt="banniere" /></div>
 
	<div class="sidebar">
 
		MENU
 
	</div>
 
	<div class="content">
 
		CONTENU
 
	</div>
 
	<div id="footer">
 
		PIEDS DE PAGE
 
	</div>
 
</div>

Pourriez-vous m'aider ou me donner des pistes ?

En vous remerciant

[Marc22]

Bonjour,

gère le avec des commentaires conditionnels :

Code :

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

1
2
3
<!--[if IE]>
<link rel="steelsheet" type="text/css" href="..." />
<![endif]-->

les autres navigateurs l'interprèteront comme un commentaire. Et dans le href, tu mets une autre feuille de style qui gère IE.

[telodo]

J'ai réussi à gérer le problème de cette façon. Merci beaucoup !