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

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Répondre
queric
Arias
Messages : 5
Enregistré le : 20 févr. 2006, 12:13

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

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 "&nbsp;" 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.
Modifié en dernier par queric le 11 mars 2006, 23:03, modifié 2 fois.

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

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

Quelle est la hauteur de ton body ? :wink:

queric
Arias
Messages : 5
Enregistré le : 20 févr. 2006, 12:13

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?

Flore
Administratrice
Messages : 3559
Enregistré le : 19 nov. 2003, 23:04
Localisation : Lyon

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

On dirait quand même un bug ou une régression de gecko 1.8
Flore
Mac OSX + Nightly / Laptop Linux Mint + Nightly / Nightly sur Android

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

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. :wink:

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. :wink:
PPS : si ça peut te rassurer un peu, même sur CSS Zen Garden il y a quelques soucis avec ce changement :roll:

@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 :roll:

Flore
Administratrice
Messages : 3559
Enregistré le : 19 nov. 2003, 23:04
Localisation : Lyon

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
Flore
Mac OSX + Nightly / Laptop Linux Mint + Nightly / Nightly sur Android

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

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 :wink: )
En XHTML, c'est même le seul moyen de faire disparaître la marge due au <html> :wink:

queric
Arias
Messages : 5
Enregistré le : 20 févr. 2006, 12:13

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.

Flore
Administratrice
Messages : 3559
Enregistré le : 19 nov. 2003, 23:04
Localisation : Lyon

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%
}
Flore
Mac OSX + Nightly / Laptop Linux Mint + Nightly / Nightly sur Android

queric
Arias
Messages : 5
Enregistré le : 20 févr. 2006, 12:13

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

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

calimo
Animal mythique
Messages : 14118
Enregistré le : 26 déc. 2003, 11:51
Localisation : Le frigo scandinave
Contact :

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 :wink:

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité