Background disparu sous FF

Question

creamille

10 Jun 2008 à 15:52

Hello !

J'ai un soucis qui me laisse perplexe !
Je vous explique brièvement ma CSS: j'attribue une image de fond au body (dégradé) que je répète verticalement. A l'intérieur, j'ai un DIV main qui possède lui aussi une image de fond, répété horizontalement. A l'intérieur de celui-ci, j'ai un autre DIV (main) dans lequel j'ai un premier DIV bandeau, un autre ss_bandeau, un autre pour le menu et enfin trois autres que je mets en float left: gauche, centre, droite.

Problème : lorsque je place ces trois derniers DIV (gauche, droit, centre), j'ai le background de "main" qui disparait sous Firefox alors que sous IE, il est très bien géré...

Voici le CSS

body{
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#FFFFFF url(img/degrade_blue.jpg);
background-repeat:repeat-x;
}

#main{
margin:auto;
background-image:url(img/background.png);
width:962px;
}


#contenu{
width:936px;
margin-left:23px;
}

a img{
text-decoration:none;
border:none;
}

/*^'^ BANDEAU ^'^*/

#bandeau{
height:147px;
width:936px;
margin-left:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#7c7979;
background-color:#FFFFFF;
}

.ephemeride{
margin-right:40px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.ephemeride a:link{
text-decoration:none;
}

#bandeau .logo{
margin:19px auto auto 54px;
}

#ss_bandeau{
padding-left:170px;
text-align:center;
}

#ss_bandeau p{
display:inline;
}

#ss_bandeau p img{
align:right;
}

.rss{
margin-left:40px;
width:21px;
height:30px;
}

.rss img{
vertical-align:bottom;
}

.recherche{
margin-left:120px;
}

/*^'^ MENU ^'^*/
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
margin-left:12px;
height: 74px;
width:938px;
background: url(img/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/	
#nav-container a{	
padding:7px 30px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
font-weight: bold;
background: url(img/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(img/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/	
#nav-container div, #nav-container ul{	
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(img/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/	
#nav-container div a, #nav-container ul a{	
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(img/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/	
#nav-container div a:hover, #nav-container ul a:hover{	
background-color: #FFFFFF;
background: url(img/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/	
#nav-container .item-secondary-title{	
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
/* background: url(images/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/	
#nav-container .divider-horiz{	
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/	
#nav-container .divider-vert{	
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

/*^'^ Contenus ^'^*/

#gauche{
width:202px;
float:left;
}

#btn-live{
width:202px;
height:60px;
}

#moment{
width:198px;
height:auto;
border:solid #2ebdeb 1px;
border-top:none;
margin-bottom:15px;
}

#meteo{
width:198px;
height:auto;
text-align:center;
border:solid #2ebdeb 1px;
border-top:none;
margin-bottom:15px;
}

#so{
width:198px;
height:auto;
border:solid #2ebdeb 1px;
border-top:none;
}

#centre{
width:400px;
float:left;
}

#droit{
float:left;
width:300px;
}

Voici le HTML

<body>

<div id="main">
    <div id="bandeau">
    	<a href="http://www.tv7.com"><img class="logo" src="img/logo.jpg" /></a>
    	<span style="width:728px;height:90px;margin:10px auto auto 47px; position:absolute;">
        <SCRIPT LANGUAGE='JavaScript'>
<!--
OAS_AD('Position4');
//-->
</SCRIPT>
        <SCRIPT LANGUAGE='JavaScript'>
<!--
OAS_AD('Top');
//-->
</SCRIPT>
		</span>
        <div id="ss_bandeau">
        <span class="ephemeride">
			<SCRIPT language="Javascript" style="text-decoration:none;color:#7c7979;" src="http://www.ptitplus.com/date/index_js.php3"></SCRIPT> | <SCRIPT language="Javascript" src="http://www.ptitplus.com/saint/index_js.php"></SCRIPT>
        </span>
        <span class="rss"><p>RSS <a href="http://www.tv7.com/rss.php" target="_blank"><img src="img/btn-rss.jpg" /></a></p></span>
        <span class="recherche">Chercher une vidéo	
            <input name="rechercher" value="" type="text">
            <input name="button" value="chercher" onclick="rech()" type="image" src="img/btn-loupe.gif">
        </span>
        </div>
    </div>
<div class="nav-container-outer">
   <img src="img/nav-bg-l.jpg" alt="" class="float-left" />
   <img src="img/nav-bg-r.jpg" alt="" class="float-right" />
   <ul id="nav-container" class="nav-container">
      <li><a class="item-primary" href="#">ACCUEIL</a>
         </li>
   
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">GRILLE DES PROGRAMMES</a>
   
         <ul style="width:150px;">
         <li><a href="#">Lundi</a></li>
         <li><a href="#">Mardi</a></li>
         <li><a href="#">Mercredi</a></li>
         <li><a href="#">Jeudi</a></li>
         <li><a href="#">Vendredi</a></li>
         <li><a href="#">Samedi</a></li>
         <li><a href="#;">Dimanche</a></li>
         </ul></li>
   
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">EMISSIONS</a>
   
         <ul style="width:150px;">
         <li><span class="item-secondary-title" >Actualités</span></li>
         <li><a href="#;">Enquête</a></li>
         <li><a href="#;">Le dossier</a></li>
         <li><a href="#;">Le journal</a></li> 
         <li><a href="#;">On en parle...</a></li>
         <li><a href="#;">Point de Vue</a></li>
         <li><a href="#;">Polémiques</a></li>
         <li><a href="#;">Retour sur Info</a></li>
         <li><a href="#;">Séance Tenante</a></li>
         <li><span class="divider divider-horiz" ></span></li>
         <li><span class="item-secondary-title" >Economie</span></li>
         <li><a href="#">33 la vie</a></li>
         <li><a href="#;">Modes d'emploi</a></li>
         <li><a href="#;">Tous Comptes Faits</a></li>
         <li><span class="divider divider-horiz" ></span></li>
         <li><span class="item-secondary-title" >Passions</span></li>
         <li><a href="#">7 de table</a></li>
         <li><a href="#">Carré V.I.P.</a></li>
         <li><a href="#">Contacts</a></li>
         <li><a href="#;">Ecran total</a></li>
         <li><a href="#;">Escale</a></li>
         <li><a href="#;">Game in Bordeaux</a></li>
         <li><a href="#;">La vie de Château</a></li>
         <li><a href="#;">Les RDV de Chloé</a></li>
         <li><a href="#;">Ma Maison Gironde</a></li>
         <li><a href="#;">Panier gourmand</a></li>
         <li><a href="#;">Tout un art</a></li>
         <li><span class="divider divider-horiz" ></span></li>
         <li><span class="item-secondary-title" >Sortir</span></li>
         <li><a href="#">Ca part en live</a></li>
         <li><a href="#">Carte postale</a></li>
         <li><a href="#;">La ronde des quartiers</a></li>
         <li><a href="#;">Suivez le Guide</a></li>
         <li><a href="#;">Vous qui partez...</a></li>
         <li><span class="divider divider-horiz" ></span></li>
         <li><span class="item-secondary-title" >Sport</span></li>
         <li><a href="#;">Les yeux de l'aventure</a></li>
	     </ul></li>
   
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#">SERVICES</a>
   
         <ul style="width:150px;">
         <li><a href="#">Annuaire associations</a></li>
         <li><a href="#">Commande DVD</a></li>
         <li><a href="#">Maporama</a></li>
         <li><a href="#">Newsletter</a></li>
         <li><a href="#">Qualité de l'air</a></li>
         <li><a href="#">Recevoir TV7</a></li>
         <li><a href="#">Téléchargement logo</a></li>
         
         </ul></li>
   
      <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#;">CONTACTS</a>
   
         <ul style="width:150px;">
         <li><a href="#">Direction</a></li>
         <li><a href="#">Service commercial</a></li>
         <li><a href="#">Rédaction</a></li>
         <li><a href="#">Présentateurs</a></li>
         <li><a href="#">Scriptes</a></li>
         <li><a href="#">Technique</a></li>
         <li><a href="#">Production</a></li>
         <li><a href="#">Infographie</a></li>
         <li><a href="#">TV7.com</a></li>
         </ul></li>
         
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#;">FAQ</a>
</li>
         
       <li><span class="divider divider-vert" ></span></li>
      <li><a class="item-primary" href="#;">FORUM</a>
   </li>
   <li class="clear">&nbsp;</li></ul>
</div>
    <div id="contenu">
    		<div id="gauche">
			<div id="btn-live"><a href="mms://88.191.38.77:80/live.asf" target="_blank"><img src="img/btn-live.jpg" /></a>            </div>
            
            <img src="img/en_ce_moment.gif"/><br/>
            <div id="moment">this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test<br/>
            </div>
            
            <img src="img/head_meteo.gif"/><br/>
            <div id="meteo"><img src="http://www.tv7.com/data/meteo/4jours.jpg" alt="meteo gironde" height="165" width="165"><br/>
            </div>
            
            <img src="img/head_so.gif" /><br/>
            <div id="so">Encore un meurtre à Trifouilli les Oies<br/>Et là c'est le drame<br/>
            </div>
            </div>
			
      <div id="centre">
<img src="img/btn-live.jpg" />
             
      </div>
     		
</div>   
</div>
</body>

Je m'arrache les cheveux dessus, je ne comprends pas Smiley sweatdrop

creamille

10 Jun 2008 à 16:03

Bon excusez-moi je suis un boulet...cela faisait 2 jours que je me prenais la tête dessus et en fait, il s'agissait juste d'indiquer un "background-repeat' au div main. Chose que je n'avais pas faite car j'étais persuadée que par défaut, un background se répétait....

Encore désolée! Smiley smile

Benjamin D.C.

10 Jun 2008 à 16:10

creamille a écrit :
j'étais persuadée que par défaut, un background se répétait....

C'est le cas. Smiley cligne

creamille

10 Jun 2008 à 16:10

Bon en fait non...le problème est toujours là... Le mystère reste entier! Smiley decu

dotmessy

10 Jun 2008 à 20:05

ta un hack pour forcer firefox a prendre une valeur

ce hack est : !important

exemple : background: url(img/nav-bg.jpg) !important;

test le en le mettant sur la ligne de ton background qui foirent !!! Smiley murf

je dis cela a la louche, j'ai pas vérifié ton code. Smiley confused

Modifié par dotmessy (10 Jun 2008 - 20:07)

fvsch

10 Jun 2008 à 20:16

dotmessy a écrit :
ta un hack pour forcer firefox a prendre une valeur

Alors on apprend CSS et on oublie les hacks, merci. Smiley lol

(Et puis ici ça ne servirait strictement à rien. Smiley cligne

)

Pour revenir au problème:
- le comportement de Firefox est normal (tu peux vérifier avec Opera ou Safari);
- le rendu que tu obtiens dans Internet Explorer provient d'un comportement non standard de ce navigateur (une obscure histoire de HasLayout).

Dans la série des shocking facts, il y a le fait que ton image de fond est parfaitement répétée. Par contre, il est probable que div#main ait une hauteur de 147px (la hauteur du bandeau) et pas un cheveu de plus.

Allez, mettons fin à ce suspense insoutenable, et introduisons le concept de... dépassement des flottants.

PS: les gros blocs de code c'est tout de même très chiant à lire. Une page en ligne, c'est plus simple pour ceux qui souhaiteraient t'aider. Smiley cligne

creamille

11 Jun 2008 à 09:54

Alléluïa! Je vous aime !!!! Il fallait donc rajouter

<div style="clear:both"></div>

juste après mes éléments flottants.
Merci beaucoup beaucoup beaucoup Florent!

ps: excuse-moi pour cette quantité de lignes de code, mais j'avais lu que vous préfériez avoir accès au code... Sorry

ENCORE MERCI Smiley biggrin

et biz, soyons fous!

fvsch

11 Jun 2008 à 10:18

creamille a écrit :
mais j'avais lu que vous préfériez avoir accès au code...

C'est le cas. Mais le meilleur moyen pour ça est la page en ligne. Avec des outils comme la Web Developer Toolbar ou Firebug, on a accès au code très facilement et de manière ciblée (et sans ces outils, on peut toujours afficher la source, quel que soit le navigateur).

creamille

11 Jun 2008 à 14:54

c'est encore moi Smiley rolleyes

J'ai de nouveau un soucis... J'ai donc 3 div en float left en guise de colonnes, mais problème : lorsque je souhaite mettre du texte dans le dernier div, divisé lui-même en autres div (ce que vous voyez comme des "modules" avec des bordures bleues et une en-tête), le texte se place complètement à gauche dans le div principal.

Savez-vous pourquoi ?

Oups, excusez-moi, j'ai oublié de vous mettre le lien :http://www.tv7.com/site_new
Modifié par creamille (11 Jun 2008 - 16:05)

Sujet clos

CSS et mise en forme, CSS3

Background disparu sous FF