[MOZILLA] Bug avec background

**jackrabbit** · 02/01/2005, 23h11

J'ai un problème avec mon arrière-plan sur Mozilla. Ça fonctionne bien sur IE 6.0. Le background de mes div ENTETE et DETAIL semble écraser mon div MENU, alors qu'avec IE 6.0, le bon background est affiché dans chaque div.

Voici mon 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
 
body {
  background-color: #F5E9CF;
  font-family: "Comic Sans MS", serif;
  border: 0px;
  padding: 0px;
}
 
@media print { 
  #menu   { display: none; }
} 
 
#menu {
  float: left;
  width: 230px;
  height: 100%;
  background-color: blue;
}
 
#entete {
  position: relative;
  height: 165px;
  background-color: red;
}
 
#detail {
  position: relative;
  height: 100%;
  background-color: green;
}

Voici mon HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<html>
<head>
  <link rel="stylesheet" href="bug.css" type="text/css">
</head>
<body>
  <div id=menu>MENU</div>
  <div id=entete>ENTETE</div>
  <div id=detail>DETAIL</div>
</body>

Voici le résultat désiré, tel que vu avec IE 6.0:

Si vous voulez l'essayer sur votre fureteur, il y a une copie sur http://www.clubarcenciel.com/bug.html

P.S. Lors de l'impression, je veux que le div MENU soit omis et que les autres div soient imprimés en commençant à la marge gauche. Voilà pourquoi je dois utiliser des POSITION: RELATIVE pour les div ENTETE et DETAIL. Votre solution doit donc tenir compte du résultat imprimé.

Merci

**Maxoo** · 03/01/2005, 09h34

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
@media print {
  #menu   { display: none;
  float: left;
  width: 230px;
  height: 100%;
}
 
#menu {
  float: left;
  width: 230px;
  height: 100%;
  background-color: blue;
}

essai ca, mais moi je tiens a te dire qu'on ne voit pas du tout ton menu sous firefox ... (meme avant d'imprimer...)

**jackrabbit** · 03/01/2005, 14h50

Je l'ai essayé, et ajouté ces directives au media print n'affecte aucunement l'affichage à l'écran.

Est-ce que je ne comprend pas correctement les directives CSS de background où est-ce un bug de Mozilla / Netscape ?

J'ai toujours crû que le background était attaché à la zone occupée par un DIV, pas à la page au complet. Est-ce qu'un expert CSS peut m'éclairer S.V.P. ?

**Maxoo** · 03/01/2005, 15h23

disons que ca dépend ce que tu veux.

mais si tu fais un display:none
ca t'enleve entierement ton div ... c'est comme si tu l'avais pas écris dans ta page html ...

donc pour le print, c'est ca que tu veux non ??

sinon je vois pas pkoi t'embeter avec ca ...

**jackrabbit** · 03/01/2005, 16h25

Je n'ai peut être pas été assez clair.

À l'écran: je veux voir mon div de menu à gauche (bleu), mon div d'entête en haut à droite (rouge) et mon div de détail en bas à droite (vert). Ça fonctionne très bien avec IE 6.0 mais avec Firefox / Netscape, le div de menu est écrasé par le background des div entête et détail. Pourquoi?

Sur papier: je ne veux pas voir le div de menu (un menu c'est surperflus sur papier). Je dois donc voir uniquement les div entête et détail, aligné sur la marge gauche du papier. Ça marche très bien présentement. Toutes mes tentatives pour corriger le bug de Firefox / Netscape (genre "position: absolute") ont provoqué des bugs lors de l'impression (ajout d'une grosse marge blanche à la place du menu).

Ma question est: pourquoi Firefox / Netscape n'appliquent pas le backgroud uniquement sur les div respectifs? Est-ce un bug connu? Existe-t-il une solution? J'ai toujours crû que Firefox / Netscape respectait les normes CSS à 100%, alors pourquoi ils ne respectent pas les limites de leur conteneur lors de l'application d'un background à un DIV alors que IE 6.0 le fait?

**Maxoo** · 03/01/2005, 17h17

Envoyé par jackrabbit

Est-ce un bug connu? Existe-t-il une solution? J'ai toujours crû que Firefox / Netscape respectait les normes CSS à 100%, alors pourquoi ils ne respectent pas les limites de leur conteneur lors de l'application d'un background à un DIV alors que IE 6.0 le fait?

je pense que le bug est plutot sous IE que sous Fx ...
je pense qu'il y a quelque chose qui cloche ou que tu n'as pas fait, ce qui donne un bug ...

**jackrabbit** · 04/01/2005, 01h54

Que le bug soit dans IE ou dans Firefox, je m'en fout pas mal. Ce que je veux, c'est que ma page fonctionne avec les deux type de navigateur.

Est-ce que quelqu'un sait comment générer le résultat de mon image avec Firefox en CSS? Moi tout ce que je réussi à obtenir, c'est une barre rouge horizontale et une barre verte horizontale en dessous.

**Maxoo** · 04/01/2005, 10h26

c'est bien parce que j'avais 5 minutes que j'ai cherché :

il suffit de rajouter :

Code :

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

overflow:hidden;

dans tes menu rouge et vert qui déborde.

ou

Code :

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

overflow:auto;

si tu veux la scrollbar ...

**jackrabbit** · 05/01/2005, 21h05

Ça me met sur une piste. Par contre, je crois que ça l'implique un redesign au niveau de la structure de mes DIV, car ça cause d'autres problèmes ailleurs dans ma page.

Merci

[MOZILLA] Bug avec background

CSS

Discussions similaires

Partager

Partager