[Résolu] background sur élément body dans FF 1.5.0.1

queric · Message par **queric** » 20 févr. 2006, 12:55

Bonjour à tous,
je me trouve devant une grosse bizarrerie que voici:
la page d'accueil de ce site, juste pour dire qu'il est en travaux, est très simple. Je veux juste que le fond soit du même rouge que l'image et que cette dernière se trouve centrée, en bas de la zone d'affichage du navigateur. Voici la source:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alcide et son Bidet</title>
<style type="text/css">
<!--
body {
	background: #D60808 url(hector.jpg) bottom center no-repeat;
}
-->
</style>
</head>

<body>
</body>
</html>

Ce code est validé par les validateurs xhtml et css du w3c et son rendu est correct dans ces navigateurs:
-sous win:
Netscape 6
Mozilla 1.7.2
FireFox 0.9.3
FireFox 1.0.7
Opera 7.23
IE 6
-sous linux:
Konqueror 3.3.2
FireFox 1.0.6
n'ayant aucune machine pour faire tourner macosX je n'ai pas pu faire de test sur cette plateforme.

Mais voila la bizarrerie, l'image est décalée vers le haut et l'on ne peut voir que quelques pixels du bas de l'image, dans les 2 navigateurs suivants:
FireFox 1.5.0.1/win
SeaMonkey 1.0/win

Sauriez-vous pourquoi dans ces deux navigateurs très récents cette page est mal interprétée? Merci.

ps: en insérant un espace " " entre les éléments body je vois un tout petit peu plus l'image qui se redécale vers le bas, mais elle n'est pas entièrement apparante et se situe toujours dans la partie top de la zone d'affichage du navigateur.

calimo · Message par **calimo** » 20 févr. 2006, 12:58

Quelle est la hauteur de ton body ?

queric · Message par **queric** » 20 févr. 2006, 13:13

merci de ta réponse calimo mais même si je spécifie la hauteur de body à 100% ça ne marche pas, en fait ce que je voulais, c'est que l'image apparaisse toujours en bas et ce de manière fluide, même avec des résolutions d'écran différentes par exemple.
Mais peut être ai-je mal compris ta question?

Message par **Flore** » 20 févr. 2006, 13:15

On dirait quand même un bug ou une régression de gecko 1.8

calimo · Message par **calimo** » 20 févr. 2006, 13:21

queric a écrit :si je spécifie la hauteur de body à 100% ça ne marche pas,

100% de quoi ?

J'ai bien compris que l'image doit être en bas

Simplement, tu dois te poser la question : en bas de quoi ?

Pour t'aider, n'oublie pas que tu peux entourer les éléments avec un border:1px solid blue; par exemple. Entoure le body, et demande-toi ce qui "construit" le reste de la page.

PS : effectivement, le rendu n'est pas 100% cohérent, par exemple pourquoi le rouge remplit-il la page si elle n'est pas le body ? Pourquoi ça a "changé" d'un coup ? Là je dois avouer que je ne sais pas te répondre, mais au moins tu peux "contourner" le problème assez facilement en pensant à la racine de ton document.

PPS : si ça peut te rassurer un peu, même sur CSS Zen Garden il y a quelques soucis avec ce changement

@Flore : on doit pouvoir retrouver un vieux sujet où il est question de "viewport" et autres joyeusetés de ce genre

Edit : et voilà : http://www.geckozone.org/forum/viewtopi ... t=viewport
Ce qui ne veut pas dire qu'il n'y a pas quelques régressions/incohérences, en particulier le fond ne devrait être rouge que dans body, c'est-à-dire qu'on ne devrait pratiquement pas le voir or ce n'est pas le cas

Message par **Flore** » 20 févr. 2006, 13:32

Peut on appliquer les styles à HTML au lieu de Body ? Je veux dire : est-ce correct et valide ?
Dans ce cas là :

Code : Tout sélectionner

html {
   background: #D60808 url(hector.jpg) bottom center no-repeat;
}

marcherait sous Firefox 1.5

calimo · Message par **calimo** » 20 févr. 2006, 13:39

Flore a écrit :Peut on appliquer les styles à HTML au lieu de Body ? Je veux dire : est-ce correct et valide ?
Dans ce cas là :
Code : Tout sélectionner
html {
   background: #D60808 url(hector.jpg) bottom center no-repeat;
} 
marcherait sous Firefox 1.5

Oui oui on peut tout à fait ! (ne pas oublier de fixer la hauteur de body à 100% lui aussi

)
En XHTML, c'est même le seul moyen de faire disparaître la marge due au <html>

queric · Message par **queric** » 20 févr. 2006, 13:51

Je n'ai pas FF 1.5 sous la main mais en donnant à l'élément html la propriété background:... et en applicant une hauteur de 100% au body, le problème persiste dans SeaMonkey, j'imagine que ça doit être la même chose dans FF.
Merci pour vos pistes.

Message par **Flore** » 20 févr. 2006, 14:08

Pardon, voilà le bon code :

Code : Tout sélectionner

html {
	background: #D60808 url(hector.jpg) bottom no-repeat;
        height: 100%
}

queric · Message par **queric** » 20 févr. 2006, 14:12

comme la couleur de fond, merci beaucoup pour cette aide.

calimo · Message par **calimo** » 20 févr. 2006, 17:49

Ou aussi :

Code : Tout sélectionner

html {
	height: 100%;
}
body {
	background: #D60808 url(hector.jpg) bottom no-repeat;
	height: 100%;
}

L'important étant de préciser les hauteur, qui par défaut sont nulles

Geckozone

[Résolu] background sur élément body dans FF 1.5.0.1

[Résolu] background sur élément body dans FF 1.5.0.1

Qui est en ligne ?