Décalage d'un élément fixe sous Firefox

Titum · 21/11/2011, 11h35

Bonjour à tous,
Je me prends la tête depuis la dernière mise à jour de FF : mon menu fixé en haut de la page a un décalage de 1px à gauche et en haut par rapport à la page, ce qui ne se produit pas sous IE (pour une fois que c'est dans ce sens

)
voici ma page minimale sur laquelle je travail ce problème (HTML et 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
67
68
<html>
<head>
<style>
body, #menu #corps {
	margin:0;
	padding:0
}
#menu {
	background:url('http://www.lueur-data.fr/menufond.gif') repeat-x left top;
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	opacity:0.85;
	filter:alpha(opacity=85);
}
#container {
	margin:0 auto;
	width:780px;
	min-width:780px;
	color:#fff;
	font-family: arial, helvetica, sans-serif;
	font-weight:bold;
}
#container ul {
	display: none;
	visibility: hidden;
	padding:0px 0px 0px 8px;
	margin:0;
}
#container li {
	float:left;
	padding:0;
	margin:0;
	list-style:none;
	width:130px;
}
#container h2 {
	margin:0;
	padding:6px 0px 0px 6px;
	height:28px;
	width:130px;
	font-size:16px;
	text-align:center;
}
#container li:hover ul {
	display: block;
	visibility:visible;
}
 
</style>
</head>
<body>
<div id="menu">
<ul id="container">
	<li id="m1"><h2>menu1</h2><ul>liens</ul></li>
	<li id="m2"><h2>menu2</h2><ul>liens</ul></li>
	<li id="m3"><h2>menu3</h2><ul>liens</ul></li>
	<li id="m4"><h2>menu4</h2><ul>liens</ul></li>
	<li id="m5"><h2>menu5</h2><ul>liens</ul></li>
	<li id="m6"><h2>menu6</h2><ul>liens</ul></li>
</ul>
</div>
<div id="corps">
</div>
</body>
</html>

en fait, dès que je mets quelque chose dans le corps de la page (div "corps"), ça crée le décalage

j'ai tenté de décortiqué le code de FB qui a eu le même problème temporairement mais ça ne m'a pas aidé à saisir.
Merci pour vos conseils.

Titum · 21/11/2011, 16h27

je reprécise que le code tel que je l'ai mis ne pose pas de problème. C'est lorsqu'on ajoute du texte en-dessous du div "menu" que le décalage en haut à gauche se fait.
Mettez un peu de blablabla pour voir, n'importe où en-dessous du div "menu".

Et pour voir que sous IE ça ne se décala pas il faut ajouter <!DOCTYPE html> au début.

merci

NoSmoking · 21/11/2011, 20h49

Bonsoir,

Code :

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

1
2
3
4
body, #menu #corps {
	margin:0;
	padding:0
}

devrait être

Code :

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

1
2
3
4
body, #menu, #corps {
	margin:0;
	padding:0
}

Comment appliquer un style à plusieurs éléments/classes/identifiants ?

Citation:

Et pour voir que sous IE ça ne se décala pas il faut ajouter <!DOCTYPE html> au début.

c'est mieux AVEC quoiqu'il arrive.

Titum · 21/11/2011, 21h36

merci du coup de main mais c'est une erreur de copier/coller qui ne change malheureusement rien au problème.

voici un code encore plus petit :

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
<!DOCTYPE html>
<html>
<head>
<style>
body, #menu {
	margin:0;
	padding:0
}
#menu {
	background:url('http://www.lueur-data.fr/menufond.gif') repeat-x left top;
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	opacity:0.85;
	filter:alpha(opacity=85);
	height:40px;
}
</style>
</head>
<body>
<div id="menu">
  <font color="#FFFFFF">
	<a id="m1"><b>menu1</b></a>
	<a id="m2"><b>menu2</b></a>
	<a id="m6"><b>menu3</b></a>
  </font>
</div> du texte par exemple
</body>
</html>

J'ai fait plein de tests toujours sous FF et voilà le récapitulatif :
- le menu avec fond gif tout seul s'affiche bien avec une transparence css.
- si on remplace le gif par un jpg ou un PNG8 ou 32 c'est bon aussi
- Dès qu'on ajoute quelque chose dans la page (texte, background de page...), il y a décalage
- si on retire les filtres d'opacité avec tous ces formats, le décalage disparait
- Dès qu'on met un PNG32, par contre, il y a décalage, que le PNG32 soit avec ou sans transparence, même sans rien dans la page

Voilà le problème, vous pouvez tester par vous-même en modifiant le nom de l'image par menufond.gif, menufond.jpg, menufond.png (PNG32), menufond-png8.png, menufond-alpha85.png (PNG32).
Supprimez le texte et/ou l'opacité et vous devriez voir le même bug que moi.
Il y a incompatibilité entre la transparence (même juste potentielle en PNG32 non transparent) et un contenu dans la page.

Dernier test : ajouter un div avec une hauteur supérieure au menu et écrire en dessous : pas de décalage. coller ça après le menu :

Code :

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

1
2
<div id="decaler" style="height:40px"></div>
azezef aezr

il y a donc décalage lorsqu'il y a quelque chose sous le menu. Si la hauteur du div "decaler" est 39px ça cause le problème, à 40px (hauteur du menu) pas de problème.

Enfin

sans rien avec le menu mais en ajoutant un background dans la page genre

Code :

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

background="http://www.photofiltregraphic.com/08textures/textures02.jpg"

, ça décale aussi le menu, ce qui prouve qu'il ne faut rien sous le menu si je veux de la transparence, ce qui ne sert plus à rien !

Titum · 22/11/2011, 11h19

et aussi : si le menu est vide mais qu'il y a qqch dans la page, il n'y a pas de décalage. A mon grand désespoir, rien n'y fait !

NoSmoking · 22/11/2011, 22h15

pas fait d'essai mais essaies de mettre le CSS suivant

Code :

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

1
2
3
4
5
html, body {
  height : 100%;
  margin : 0;
  padding : 0;
}

Titum · 23/11/2011, 15h32

toujours pas. Je crois que c'est un bug et puis c'est tout, j'attendrai qu'il soit réglé par mozilla

Torgar · 02/12/2011, 12h40

Bonjour,

je n'ai pas réussi à résoudre le problème, est-il toujours d'actualité ?

Je rajoute une petit screen pour preuve.

J'ai essayé avec les différentes images et rien n'a bougé.

Pour info j'utilise la V8.0 de Firefox.

Titum · 12/12/2011, 14h21

merci Torgar pour avoir pris le temps. Je suis dépité, rien n'y fait sous FF alors que c'est nickel sous IE et Chrome.
J'ai lancé le site avec ce léger bug d'affichage, tant pis, c'est rageant mais on ne va pas y passer nos nuits si c'est un bug de FF, il faut espérer que ce sera en ordre à la prochaine mise à jour du navigateur.
Je n'ose pas mettre "résolu" puisque ça ne l'est pas

Torgar · 12/12/2011, 14h50

Est-ce que tu peux nous mettre le lien de ton site s'il te plait ? Que l'on puisse voir avec la version complète.

Merci.

12/12/2011, 14h50	#10
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Est-ce que tu peux nous mettre le lien de ton site s'il te plait ? Que l'on puisse voir avec la version complète. Merci. __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

21/11/2011, 16h27	#2
Titum Membre à l'essai Développeur Web Inscription : octobre 2010 Messages : 55 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : octobre 2010 Messages : 55 Points : 21 Points : 21	je reprécise que le code tel que je l'ai mis ne pose pas de problème. C'est lorsqu'on ajoute du texte en-dessous du div "menu" que le décalage en haut à gauche se fait. Mettez un peu de blablabla pour voir, n'importe où en-dessous du div "menu". Et pour voir que sous IE ça ne se décala pas il faut ajouter <!DOCTYPE html> au début. merci
	00

22/11/2011, 11h19	#5
Titum Membre à l'essai Développeur Web Inscription : octobre 2010 Messages : 55 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : octobre 2010 Messages : 55 Points : 21 Points : 21	et aussi : si le menu est vide mais qu'il y a qqch dans la page, il n'y a pas de décalage. A mon grand désespoir, rien n'y fait !
	00

23/11/2011, 15h32	#7
Titum Membre à l'essai Développeur Web Inscription : octobre 2010 Messages : 55 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : octobre 2010 Messages : 55 Points : 21 Points : 21	toujours pas. Je crois que c'est un bug et puis c'est tout, j'attendrai qu'il soit réglé par mozilla
	00

12/12/2011, 14h21	#9
Titum Membre à l'essai Développeur Web Inscription : octobre 2010 Messages : 55 Détails du profil Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : octobre 2010 Messages : 55 Points : 21 Points : 21	merci Torgar pour avoir pris le temps. Je suis dépité, rien n'y fait sous FF alors que c'est nickel sous IE et Chrome. J'ai lancé le site avec ce léger bug d'affichage, tant pis, c'est rageant mais on ne va pas y passer nos nuits si c'est un bug de FF, il faut espérer que ce sera en ordre à la prochaine mise à jour du navigateur. Je n'ose pas mettre "résolu" puisque ça ne l'est pas
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email