Se connecter avec
S'enregistrer | Connectez-vous

Bug sous Firefox: couleur background disparaît

Dernière réponse : dans Programmation

Bonjour, j'ai un gros souci avec une page de test que j'ai créée.
J'ai un fond de couleur #770000 pour mon body, j'ai un div pour conteni le site, qui lui a un fond blanc, et une image de fond (png) également. problème: lorsque je scroll la page, la couleur de fond du body apparaît sur la gauche en remplaçant la couleur de fond du div (le blanc quoi). :ouch: 
J'ai déja vu ce bug une fois, mais aucune idée comment le résoudre. Je pourrais bien sûr mettre directement l'image avec un fond blanc mais bon je trouve pas normal... :sweat: 

Voici mon code:

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    

  3. <head>
    

  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    

  5. <title>Document sans nom</title>
    

  6. <link href="wid.css" rel="stylesheet" type="text/css" />
    

  7. </head>
    

  8. <style type="text/css">
    

  9. *{
    

  10. margin:0;
    

  11. } 
    

  12. </style>
    

  13. <body style="margin: 0px; background-color:#770000">
    

  14. <div id="sitebase">
    

  15. <div id="header"></div>
    

  16. </div>
    

  17. </body>
    

  18. </html>



CSS:
  1. #sitebase {
    

  2. 	background-color: #FFFFFF;
    

  3. 	width: 900px;
    

  4. 	height: 1000px;
    

  5. 	position: absolute;
    

  6. 	left: 50%;
    

  7. 	margin-left: -455px;
    

  8. 	border: 5px solid;
    

  9. 	background-image:url(mainborder-top-left-right.png);
    

  10. 	background-repeat: no-repeat;
    

  11. 	background-position: center top;
    

  12. }
    

  13.  
  14. #header {
    

  15. 	background-image: url(header750x200.jpg);
    

  16. 	position: relative;
    

  17. 	left: 50%;
    

  18. 	margin-left: -375px;
    

  19. 	margin-bottom: 200px;
    

  20. 	top: 110px;
    

  21. 	height: 200px;
    

  22. 	width: 750px;
    

  23. }



Ce serait gentil de m'expliquer pourquoi il fait ça :/ 
voici l'adresse: http://whatif-web.goldzoneweb.info/testsite/wid.html

ah ben désolé mais maintenant il affiche même plus l'image :sweat: 
bon j'en ai eu marre, j'ai mis une image unique en fond, mais si quelqu'un sait pourquoi ça m'a fait ça, qu'il n'hésite pas ;) 

Autres pages sur : bug firefox couleur background disparait

Lassé par la pub ? Créez un compte

xx-lastardu71210-xx a dit :
ah ben désolé mais maintenant il affiche même plus l'image :sweat: 
bon j'en ai eu marre, j'ai mis une image unique en fond, mais si quelqu'un sait pourquoi ça m'a fait ça, qu'il n'hésite pas ;) 

Si, il l'affiche, mais c'est long à charger : le serveur de ton hébergement rame......

A part ça, rien ne permet de mettre en évidence ton pb de scroll [:spamafote].. En l'état, je ne vois pas ce qui "coince"..

Peut-être que tu as un pb de centrage lorsque la fenêtre devient moins large que ton <div>. Pour corriger, essaie ceci :
  1. #sitebase {
    

  2.     position: relative; // Pas de position: absolute dans ton cas ! Si tu dois mettre un conteneur après, tu ne pourras pas le placer correctement et utiliser pleinement la hauteur de l'écran de ton visiteur.
    

  3.     margin: 0 auto; // marges latérales automatiques, donc centrage du conteneur dans son contenant.
    

  4.     }

D'ailleurs, ne bride pas la hauteur de ton <div> principal à la hauteur d'un timbre poste !! Sur mon 19" CRT en 1280x960, ton site apparait ridicule.. Et c'est dommage ;) ..

Sinon, pense plutôt ton XHTML en DOCTYPE Strict : 1.0 ou 1.1. Ca t'évitera de laisser passer des attributs HTML désormais totalement obsolètes..

Et pour le jeu de caractères, si tu veux conserver le jeu Occidental, utilise le "iso-8859-15" : il prend en compte l'€ et les Œ et œ précédemment oubliés ;) .. Mais si tu peux, essaie l'Unicode "utf-8" : il n'est pas non plus parfait, mais parmi les avantages il y a celui de ne plus du tout utiliser les caractères HTML spéciaux pour les lettres accentuées, ces lettres qui peuvent parfois poser des soucis dans les autres langues..

:jap: 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet