Pas de margin-top lors de la simulation de position:fixed sous IE

**franculo_caoulene** · 04/12/2007, 14h46

Salut,

En utilisant l'exemple de la FAQ : Comment simuler le style CSS "position : fixed" sous Internet Explorer, sans utiliser de javascript ?. Un problème intervient dans mon adaptation. La propriété margin-top n'a aucun effet sur #contenu sous IE, je suis obligé d'utiliser padding-top. Savez-vous pourquoi?

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>jquery mon album photo</title>
    <style type="text/css">
    * {margin:0; padding:0; background-color:#000000;}
	#entete {
		width:100%; 
		height:100px; 
		background-color:#111111; 
		position:fixed; 
		top:0; 
		left:0; 
		color:#dddddd;
 
		position:expression("absolute"); 
		width:expression("100%"); 
		top:expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
		left:expression("0px"); 
	}
	#contenu {
		padding-top:120px;
		width:500px; 
		background-color:#222222;
		color:#dddddd;
	}
    </style>
  </head>
  <body>
    <div id="entete">ENTETE</div>
	<div id="contenu">Du texte à mettre
	</div>
  </body>
</html>

Merci par avance.

PS: sans utiliser javascript, c'est vite dit...

**Bisûnûrs** · 04/12/2007, 14h55

Envoyé par franculo_caoulene

PS: sans utiliser javascript, c'est vite dit...

Sans Javascript apparent.

J'avoue ne pas savoir ce qui fait réagir IE6 comme ça, mais je sais qu'au lieu de mettre un padding-top, tu peux mettre un margin-top sur le body qui fonctionne très bien.

Autre chose, pour ne pas avoir le clignotement sur IE6 quand tu scrolles, rajoute ce code dans le body :

Code :

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

background:url(blank.gif) fixed;

**franculo_caoulene** · 04/12/2007, 15h06

Ca ne répond pas à ma question précisément mais ça résoud le problème sous-entendu. Je tiens donc à dire "très grande classe!", merci.
J'hésite à mettre le tag [Résolu]...

Peut-être faudrait-il compléter la question pour le clignotement?

Merci encore.

[edit] d'ailleurs dans l'exemple donné ces deux lignes ne sont pas nécessaires

Code :

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

1
2
width:expression("100%"); 
left:expression("0px");

Enfin à mes yeux.

**Bisûnûrs** · 04/12/2007, 15h14

Peut-être attendre un peu, si quelqu'un a la réponse à la question originelle.

Je vais en référer au responsable de la FAQ pour le clignotement et le code inutile, qui l'est aussi pour moi.

**Bisûnûrs** · 04/12/2007, 15h24

Au passage, à cause de ton prologue XML, IE6 bascule en mode Quirks.

Si jamais tu décides de l'enlever pour avoir un mode Standard sur IE6, il faut que tu modifies le code Javascript : Remplacer document.body par document.documentElement.

**franculo_caoulene** · 04/12/2007, 15h39

Toujours bon à savoir, merci encore.

Pas de margin-top lors de la simulation de position:fixed sous IE

CSS

Vue hybride

Discussions similaires

Partager

Partager