Background invisible sous Firefox [RESOLU]

Bonjour,

j'ai un problème d'affichage d'un background-image sous firefox.... et pas sous IE. Ce background concerne une div "contenu" qui contient deux div "menu" et "texte".

<div id="contenu">
<div id="menu">
</div>
<div id="texte">
</div>
</div>

Les div menu et texte n'ont pas de background, je devrais donc voir celui que j'ai attribué à la div contenu (il s'agit d'un bandeau de 1000 x 20px que je répète en y). Ca marche bien sous IE mais pas sous mozilla, comme si la présence de mes div "menu" et "texte" empéchaient le background de mon contenu de s'afficher.

Voici mon code css :

#contenu {
width:1000px;
margin:auto;
text-align:justify;
background-image:url(../../IMG/back_contenu.png);
background-repeat:repeat-y;
padding-top:30px; (le background s'affiche sur cette partie, qui n'est pas recouverte par les div)
}

#menu {
width:220px;
height:auto;
margin:auto;
float:left;
}

#texte {
width:730px;
height:auto;
padding-right:50px;
float:left;
}

Merci d'avance pour votre aide.

Flo
Modifié par florianl (20 May 2008 - 15:45)

Hello,

En regardant vite fait, ça ne marche pas parce que :
- Tu n'as pas de contenu dans #menu et #texte, la <div> #contenu ne peut donc pas s'étirer pour faire apparaître l'arrière-plan. Rajoute height:500px (ou quelques lignes de texte tout simplement) dans #texte pour tester.
- le chemin du background pose problème : "../../IMG/back_contenu.png" (le dossier IMG est-il effectivement en majuscule ?)

De plus quelques petites améliorations que tu pourrais apporter à ton code :
- height:auto ne sert à rien si tu veux que tes colonnes (#menu et #texte) aient la même hauteur,
- float:left sur #texte peut être supprimé au profit d'un margin-left:220px (largeur de ton menu). Ça t'évitera quelques problèmes techniques pour la suite (bug 3px Jog sur IE, dépassement des flottants, etc.),
- rajouter un overflow:auto sur #contenu pour éviter le dépassement de ta <div> #menu.
Modifié par BeliG (20 May 2008 - 15:09)

En réalité, j'ai du contenu dans mes div. Il s'agit de boucles que j'ai enlevé pour rendre mon code plus lisible.

J'ai mis un overflow:hidden sur #contenu et mon background apparait bien maintenant sur firefox. Le problème ne venait donc pas du chemin.

Merci en tout cas pour la réponse et pour tes idées d'amélioration, en espérant que ce sujet servira à d'autres.

Florian