"position : fixed" sous IE

**pseudodejautilis** · 28/01/2011, 16h16

Bonjour,
je débute en CSS et j'ai un problème sous IE avec la mise en page car j'utilise des <div> et je veux que l'entête reste fixe, d'où l'utilisation de "position:fixed" : ça marche bien sur Firefox mais l'entête scroll avec le reste sur IE. Il semblerait que les versions antérieures à IE7 ne gèrent pas cette propriété mais ça ne marche pas même sur IE8 ! Peut-être qu'IE passe en mode Quirks mais j'ai essayé différents docType sans plus de réussite et j'ai fait valider mon code par le W3C...
Pour info, l'entête n'apparait même pas si je déclare un docType HTML4.1 Strict ou XHTML 1.0 Transitional ni si j'ajoute "http://www.w3.org/TR/html4/loose.dtd" au docType que j'utilise (<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">).
En attendant, j'utilise la rustine de Iubito et Bisûnûrs (cf. "Comment simuler le style CSS "position : fixed" sous Internet Explorer ?" de la FAQ). Merci à eux, mais c'est ça devrait fonctionner sans ça sous IE7 et suivants, et j'avoue ne plus rien y comprendre, d'où ce post. J'espère que vous y verrez plus clair que moi !

**NoSmoking** · 28/01/2011, 18h21

Bonjour,
la position:fixed fonctionne bien sous IExplorer > 6, seulement avec IE il faut un DOCTYPE Strict, par exemple

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

**pseudodejautilis** · 28/01/2011, 19h49

j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !

**NoSmoking** · 28/01/2011, 20h25

Envoyé par pseudodejautilis

j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !

peut être masqué par un autre élément, un float non compatible... ?

As tu une page pour voir les imbrications de tes éléments.?

**pseudodejautilis** · 28/01/2011, 20h48

voici mon CSS (j'espère que tu t'y retrouveras ; j'aurais voulu avoir le "content" fixe aussi mais j'y arrive pas...) :

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 {margin:0;padding:0;min-width:800px;color:#FFFFFF;}
 
#header,#margeG,#menu,#content,#margeDr {
overflow:hidden;
display:inline-block;
}
 
#header {
position:fixed;z-index:10;
width:100%;height:125px;background-color:#000000;	
	color : #FFFFFF;
	text-align : left;
	font-family : Carolus, "Book antiqua", "Comic Sans MS";
}
 
#borg,#bord {
width:10%;height:125px;background-color:#000000;font-family:Arial,Georgia,Verdana,sans-serif;font-size:15px;
}
 
#milieu {width:80%;}
 
#borg,#milieu,#bord {float:left;}
 
#margeG,#menu,#content,#margeD {float:left;}
 
#margeG,#margeD {width:10%;height:900px;background-color:#000000;}
 
#menu {
width:10%;padding:120px 0px;height:900px;background-color:#9996AB;text-align:center;font-family:Arial,Georgia,Verdana,sans-serif;font-size:12px;color:#000000;
}
 
#content {
width:70%;padding:120px 0px;height:900px;background-color:#151515;
}
 
#borg,#footer,#bord {float:left;text-align:center;}

**NoSmoking** · 28/01/2011, 22h27

rien d'anormal, mais ajoutes le left et le top, pour ton #header, à 0px

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#header {
  position:fixed;
  left : 0;
  top : 0;
  z-index:10;
  width:100%;
  height:125px;
  background-color:#000000;
  color : #FFFFFF;
  text-align : left;
  font-family : Carolus, "Book antiqua", "Comic Sans MS";
}

"position : fixed" sous IE

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager