28173 sujets

CSS et mise en forme, CSS3

Problème d'affichage image background entre IE et Firefox

Bonjour j'essaie de faire un site avec une image de fond aligné sur le bas
avec l'option CSS : 
background : #color url('mon_url.img') repeat-x bottom;


Selon que j'utilise IE ou Firefox je n'ai pas le même résultat
Sous IE le bas de ma page correspond bien au bas de la page
Mais sous Firefox le bas de la page correspond au niveau de l'élément le plus bas

Pourquoi?

si je n'est pas été clair voici l'url à visualiser sous IE et Firefox :
http://www.brandily.com/index3.php

voici mon code html et ma CSS

<!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">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />	
</head>

<body>
<div id="page">

aaa
</div>

</body>
</html>




body {
	background: #cea26c url('img/fond_degrad.gif') repeat-x bottom;
	height : 100%;
}


J'ai remarqué que si j'enlève la ligne du Doctype dans le code j'obtiens bien l'effet voulu sous Firefox et IE, à savoir mon image de dégradé aligné sur bas de ma page.
Mais bon c'est pas génial d'enlever le doctype...

Un problème en apparence simple mais jme casse les dents dessus , si qulqu'un pouvais éclairer ma lanterne...

Merki.
Modifié par Korrigan (05 Dec 2006 - 09:44)
Hello,

Je n'ai pas une réponse précise pour toi, mais a priori il faut jouer avec l'élément html (si tu appliques le style que tu donnes sur cet élément plutôt que sur body, ça fonctionne avec Firefox).
Modifié par Eldebaran (05 Dec 2006 - 09:51)
Oui cela fonctionne

mais lorsque que le contenu de la page dépasse la taille de l'écran cela ne donne pas l'effet voulu.
Il faut sans doute utiliser min-height pour les navigateurs modernes, et height avec des commentaires conditionnels pour IE6.

Amuse-toi bien. Smiley cligne
Korrigan a écrit :
Sous IE le bas de ma page correspond bien au bas de la page
Mais sous Firefox le bas de la page correspond au niveau de l'élément le plus bas

Pourquoi?

Parce que depuis Firefox 1.5 l'élément body correspond au premier bloc conteneur du document, et non pas au canevas de la fenêtre du navigateur.

On peut soit passer par html plutôt que body (à tester avec IE5, IE6, Safari, Opera...), soit demander à body de prendre toute la hauteur :
html, body {
	margin: 0; padding: 0;
	height: 100%;
}

Proposition sans garantie, j'ai pas testé pour voir si ça marche bien comme il faut... (peut-être faudra-t-il plutôt un min-height: 100% sur body).
A priori, une solution testée avec IE 5.5, IE 6, IE 7, Firefox 1.5 et Opera 9 :
html, body {
	margin: 0; padding: 0;
	min-height: 100%;
}
Et dans une feuille de style réservée, grâce aux commentaires conditionnels, aux versions inférieures ou égales à IE6 :
html, body {height: 100%;}
<edit>Tout ça avec un doctype valide</edit>
Modifié par Eldebaran (05 Dec 2006 - 10:58)
Eldebaran a écrit :
A priori, une solution testée avec IE 5.5, IE 6, IE 7, Firefox 1.5 et Opera 9 :
html, body {
	margin: 0; padding: 0;
	min-height: 100%;
}
Et dans une feuille de style réservée, grâce aux commentaires conditionnels, aux versions inférieures ou égales à IE6 :
html, body {height: 100%;}
<edit>Tout ça avec un doctype valide</edit>

Si l'image de fond est sur body, on peut laisser html en height: 100%, a priori.
mpop a écrit :
Si l'image de fond est sur body, on peut laisser html en height: 100%, a priori.
Tu veux dire se passer des commentaires conditionnels ?
Eldebaran a écrit :
Tu veux dire se passer des commentaires conditionnels ?

Non, car on utilise min-height pour body ou le conteneur global, et il faudra bien pallier à l'absence d'implémentation de min-height par IE6 et inférieurs.

Edit : Il semblerait que mettre le background sur html, avec un min-height, passe bien avec Firefox et Konqueror (html prend au minimum toute la hauteur disponible), bien également avec IE6 (le min-height n'est pas pris en compte, mais html fait par défaut au minimum toute la hauteur disponible...). Par contre, impossible d'avoir un rendu correct avec Opera ? J'ai l'impression qu'Opera 9 ne comprend pas min-height sur html et body. Smiley eek
Modifié par mpop (06 Dec 2006 - 14:30)
mpop a écrit :
Edit : Il semblerait que mettre le background sur html, avec un min-height, passe bien avec Firefox et Konqueror (html prend au minimum toute la hauteur disponible), bien également avec IE6 (le min-height n'est pas pris en compte, mais html fait par défaut au minimum toute la hauteur disponible...). Par contre, impossible d'avoir un rendu correct avec Opera ? J'ai l'impression qu'Opera 9 ne comprend pas min-height sur html et body. Smiley eek
Sympa comme solution. Smiley smile

Ceci dit, ça marche chez moi avec Opera 9.01 avec le code suivant (c'est-à-dire celui que tu décris a priori) :
html, body {margin: 0; padding: 0;}
html {min-height: 100%; background: url(i.jpg);}
Eldebaran a écrit :
Ceci dit, ça marche chez moi avec Opera 9.01 avec le code suivant (c'est-à-dire celui que tu décris a priori) :
html, body {margin: 0; padding: 0;}
html {min-height: 100%; background: url(i.jpg);}

C'est un motif en background qui se répète ?
Tu as essayé avec un border sur html ou body, ou avec l'image de fond non répétée et alignée en bas (ce qui permet, théoriquement, de déterminer la taille réellement prise par les éléments) ?
mpop a écrit :
Tu as essayé avec un border sur html ou body, ou avec l'image de fond non répétée et alignée en bas (ce qui permet, théoriquement, de déterminer la taille réellement prise par les éléments) ?
Ah oui, en effet, l'image s'aligne en bas du contenu de la page et non pas en bas de la fenêtre...

C'est bizarre qu'avec un background qui se répète ça marche, non ?
Eldebaran a écrit :
C'est bizarre qu'avec un background qui se répète ça marche, non ?

C'est que les éléments html et body ne sont pas de simple blocs, mais qu'ils entretiennent des relations incestueuses avec le cannevas de fond du navigateur. Mais comme dans toute affaire de famille la nature exacte de ces relations est difficile à déterminer, et dépendra du navigateur à qui tu poses la question.

D'où le fait d'utiliser un div comme conteneur global, pour mettre tout le monde d'accord. Smiley smile
mpop a écrit :
C'est que les éléments html et body ne sont pas de simple blocs, mais qu'ils entretiennent des relations incestueuses avec le cannevas de fond du navigateur. Mais comme dans toute affaire de famille la nature exacte de ces relations est difficile à déterminer, et dépendra du navigateur à qui tu poses la question.
je n'avais jamais vu les choses comme ça... Smiley cligne
mpop a écrit :
D'où le fait d'utiliser un div comme conteneur global, pour mettre tout le monde d'accord. Smiley smile
Oui, en effet, tu m'as convaincu.
Korrigan a écrit :
Bonjour j'essaie de faire un site avec une image de fond aligné sur le bas
avec l'option CSS : 
background : #color url('mon_url.img') repeat-x bottom;


Selon que j'utilise IE ou Firefox je n'ai pas le même résultat
Sous IE le bas de ma page correspond bien au bas de la page
Mais sous Firefox le bas de la page correspond au niveau de l'élément le plus bas

Pourquoi?

si je n'est pas été clair voici l'url à visualiser sous IE et Firefox :
http://www.brandily.com

voici mon code html et ma CSS

<!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">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />	
</head>

<body>
<div id="page">

aaa
</div>

</body>
</html>




body {
	background: #cea26c url('img/fond_degrad.gif') repeat-x bottom;
	height : 100%;
}


J'ai remarqué que si j'enlève la ligne du Doctype dans le code j'obtiens bien l'effet voulu sous Firefox et IE, à savoir mon image de dégradé aligné sur bas de ma page.
Mais bon c'est pas génial d'enlever le doctype...

Un problème en apparence simple mais jme casse les dents dessus , si qulqu'un pouvais éclairer ma lanterne...

Merki.
Sujet clos
Aller à