"position : fixed" sous IE

Version imprimable

28/01/2011, 16h16
pseudodejautilis

"position : fixed" sous IE

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 !
28/01/2011, 18h21
NoSmoking

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

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
28/01/2011, 19h49
pseudodejautilis

j'ai aussi essayé avec ce docType mais l'entête n'apparait même pas !
28/01/2011, 20h25
NoSmoking

Citation:

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.?

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:

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;}

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

Code:

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";
}

29/01/2011, 17h21
pseudodejautilis

mais c'est bien sûr !! ça marche impeccable comme ça, merci NoSmoking !!
Je vais marquer ce post comme Résolu... et en ouvrir un autre car j'ai un souci de mise en page avec mes tailles en % (c'est pas terrible suivant l'écran sur lequel on voit ma page).