[Résolu] XHTML 1.1, body background et Firefox

Question

Pages :

Benjamin D.C.

3 Jan 2007 à 15:32

Bonjour à tous,

Je rencontre un problème très étrange sur lequel je butte depuis plus d'une heure sans comprendre la moindre logique!

Il s'agit tout simplement d'une image de fond appliquée au body qui ne veut pas s'afficher avec un doctype xhtml 1.1, alors qu'en xhtml 1.0 strict, tout fonctionne à merveille! Le plus étrange, c'est que les images de fonds appliqués aux autres éléments (le h1 en l'occurence) fonctionnent sans soucis! Et, cerise sur le gâteau, même une simple couleur de fond appliquée au body n'est pas prise en compte! Smiley eek

Je précise que le problème n'est rencontré que sur Firefox, Opera lui, affiche bel et bien le fond d'écran.

Si ça peut aider à comprendre, voici le code:


[#black][b]XHTML[/b][/#]

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">


<head>
	
	<title>Titre de la page</title>
	
	<link rel="stylesheet" type="text/css" href="css/base.css" media="screen" />
	<link rel="shortcut icon" type="images/x-icon" href="img/favicon.ico" />
		
	<style type="text/css" media="screen">
	@import url(css/home.css);
	</style>	
	
</head>



<body>	

... contenu ...

</body>

</html>


[#black][b]CSS (base.css)[/b][/#]

* {margin:0; padding:0; border:none;}

body {background:url(/img/bckgrnd.png); font:62.5% "trebuchet ms", sans-serif; color:#000;}

h1 {position:absolute; left:30px; top:150px; background:url(/img/titles/logo.png) no-repeat 0 0; height:73px; padding-left:718px; clip:rect(auto, 718px, 73px, auto);}

h2 {height:9px; text-indent:-9999px; border:1px dashed #000; border-width:1px 0; padding-bottom:10px; background-position:15px 5px; background-repeat:no-repeat;}

h3, h4 {padding-left:30px;}

h3, h4, h5, strong {font-size:100%; font-weight:normal;}

h4 {color:#555;}

p {margin:18px 30px 0; line-height:140%;}

ul {list-style:none;}

hr {display:none;}

em {font-style:normal;}

blockquote, q {font:italic 160%/148% georgia, serif;}

Serait-ce tout bonnement un bug de Firefox? J'avoue ne rien comprendre...

Cordialement,
Benjamin
Modifié par Benjamin D.C. (05 Jan 2007 - 10:06)

Patidou

3 Jan 2007 à 15:55

Tu n'aurais pas la (les?) page(s) en ligne?

Benjamin D.C.

3 Jan 2007 à 15:59

Patidou a écrit :
Tu n'aurais pas la (les?) page(s) en ligne?

C'est un peu difficile de la mettre en ligne de manière publique, donc non, je ne préfère pas. Ceci dit, la page arbore exactement le même code que je vous montre ici, je ne pense donc pas que ce soit réellement utile.

koala64

Modérateur

3 Jan 2007 à 16:01

Salut,

As-tu essayé de mettre tes styles en pointant les balises html plutôt que body ?

<edit>Il te manque la meta indiquant le type MIME du document (application/xhtml+xml) et le charset. Smiley cligne

</edit>
Modifié par koala64 (03 Jan 2007 - 16:05)

Patidou

3 Jan 2007 à 16:06

Benjamin D.C. a écrit :
C'est un peu difficile de la mettre en ligne de manière publique, donc non, je ne préfère pas. Ceci dit, la page arbore exactement le même code que je vous montre ici, je ne pense donc pas que ce soit réellement utile.

J'aurais pu copier le code pour tester mais je n'aurais pas eu le bon traitement des pages en xhtml 1.1 (application/xhtml+xml) avec mon wintel du boulot. Je regarderai ce soir....

Benjamin D.C.

3 Jan 2007 à 16:07

Petite précision que je pensais inutile mais qui, en fait, pourrait être à la base du problème: la page est dynamique et affiche un doctype approprié au navigateur du client.

Avant transformation, donc, voici le code php de l'index, inspiré du code proposé à la fin de l'article Déclarations XHTML:


<?php

if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("content-type: application/xhtml+xml; charset=utf-8");
echo('<?xml version="1.0" encoding="utf-8"?'.'>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("content-type: text/html; charset=utf-8");
echo ('<?xml version="1.0" encoding="utf-8"?'.'>

<!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">


<head>

...

Modifié par Benjamin D.C. (03 Jan 2007 - 16:08)

Patidou

3 Jan 2007 à 16:08

Ah ben Koala64 a trouvé on dirait... Smiley cligne

edit : j'ai rien dit mais le charset est quand même obligatoire en cas de sauvegarde de la page je pense...
Modifié par Patidou (03 Jan 2007 - 16:09)

koala64

Modérateur

3 Jan 2007 à 16:12

Je n'ai pas testé là tout de suite mais vu que tu es en XML, il faut normalement mettre les styles que tu mettais sur body au sein de html...

On devrait pouvoir faire un truc du genre :

html, body {background:url(/img/bckgrnd.png); font:62.5% "trebuchet ms", sans-serif; color:#000;}

Sinon, la meta indiquant le type MIME et le charset sert de rappel à la déclaration du header.

Patidou

3 Jan 2007 à 16:13

Benjamin D.C. a écrit :



} else {
header("content-type: text/html; charset=utf-8");
echo ('<?xml version="1.0" encoding="utf-8"?'.'>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

<head>

...

Si tu envoies en text/html, il est préférable de ne pas mettre le prologue xml.

Un billet de Laurent Denis.

Mais heu... Pourquoi le xhtml 1.1? Tu utilises MathML?
Modifié par Patidou (03 Jan 2007 - 16:18)

Benjamin D.C.

3 Jan 2007 à 16:22

koala64 a écrit :
Je n'ai pas testé là tout de suite mais vu que tu es en XML, il faut normalement mettre les styles que tu mettais sur body au sein de html...

On devrait pouvoir faire un truc du genre :
html, body {background:url(/img/bckgrnd.png); font:62.5% "trebuchet ms", sans-serif; color:#000;}

Bien vu! Ce qui est très étrange, c'est que toutes les propriétés que j'attribue au body sont supportées sauf le background qui ne s'affiche que s'il est appliqué à l'élément html. J'ai donc deux possibilités:

[#black][b](1)[/b][/#]
html {background:url(/img/bckgrnd.png);}
body {font:62.5% "trebuchet ms", sans-serif; color:#000;}

[#black][b](2)[/b][/#]
html {background:url(/img/bckgrnd.png); font:62.5% "trebuchet ms", sans-serif; color:#000;}

Je ne comprends vraiment pas pourquoi il refuse d'appliquer une image ou une couleur de fond directement au body...

Au fait, tu dis:

koala64 a écrit :
la meta indiquant le type MIME et le charset sert de rappel à la déclaration du header.

Est-ce nécessaire?
Modifié par Benjamin D.C. (03 Jan 2007 - 16:30)

Patidou

3 Jan 2007 à 16:26

J'en rajoute une couche : si tu regardes mon site (et oui c'est moi Smiley cligne

) avec explorer ou firefox tu verras que, suivant le cas, le prologue apparaît ou pas et que les pages sont envoyées en application/xhtml+xml ou text/html. Mais il n'y a jamais de prologue quand elles sont envoyées en text/html.

P.S. : et il y a bien une image de fond sur le body...

Benjamin D.C.

3 Jan 2007 à 16:26

Patidou a écrit :
Mais heu... Pourquoi le xhtml 1.1? Tu utilises MathML?

Non non du tout, c'est juste par pure curiosité que j'essaye un doctype autre que mon habituel xhtml strict Smiley ravi

Benjamin D.C.

3 Jan 2007 à 16:28

Patidou a écrit :
J'en rajoute une couche : si tu regardes mon site (et oui c'est moi ) avec explorer ou firefox tu verras que, suivant le cas, le prologue apparaît ou pas et que les pages sont envoyées en application/xhtml+xml ou text/html. Mais il n'y a jamais de prologue quand elles sont envoyées en text/html.

Oui c'est naturellement ce que je fais aussi, l'exemple que j'ai donné ici est volontairement simplifié...

Patidou

3 Jan 2007 à 16:33

L'image de fond sur l'élément html ne marchera pas en mode text/html. Mais je ne suis plus très sûr...
Modifié par Patidou (03 Jan 2007 - 16:33)

Benjamin D.C.

3 Jan 2007 à 16:34

Patidou a écrit :
L'image de fond sur l'élément html ne marchera pas en mode text/html. Mais je ne suis plus très sûr...

Si si, ça fonctionne aussi Smiley cligne

koala64

Modérateur

3 Jan 2007 à 16:36

Benjamin D.C. a écrit :
Est-ce nécessaire?

C'est indiqué dans le billet de Laurent que t'as montré Patidou, çà... Smiley cligne

Benjamin D.C.

3 Jan 2007 à 16:39

koala64 a écrit :
C'est indiqué dans le billet de Laurent que t'as montré Patidou, çà...

Effectivement, mais comme tu semblais conseiller de le rajouter tout de même, je ne savais plus trop que faire...

Sinon, pour ce qui est de l'arrière-plan appliqué directement au body, est-ce un bug de Firefox?

Patidou

3 Jan 2007 à 16:40

Benjamin D.C. a écrit :
Si si, ça fonctionne aussi

Bon ben... J'essayerai ton code ce soir sur un ordinateur capable de m'envoyer des pages avec le bon header alors Smiley smile

. Si personne n'a trouvé d'ici-là... Smiley cligne

Modifié par Patidou (03 Jan 2007 - 16:41)

Patidou

3 Jan 2007 à 19:53

Ben voilà, j'avais du faire jadis une page avec du MathMl pour quelqu'un sur l'autre forum. Il n'y avait pas de style CSS, j'ai ajouté 2 ou 3 règles avec une image de fond sur le body et ça marche. Je vais essayer maintenant avec ton code…
Modifié par Patidou (03 Jan 2007 - 20:16)

koala64

Modérateur

3 Jan 2007 à 20:07

Benjamin D.C. a écrit :
Effectivement, mais comme tu semblais conseiller de le rajouter tout de même, je ne savais plus trop que faire...

Oui, en effet, car dans ce point de la FAQ, il est dit de manière explicite que le serveur et Apache sont tous deux configurés par défaut pour envoyer le type MIME text/html et qu'il faut ajouter la meta.
Ce n'est par contre pas précisé dans le billet de Laurent pour un vrai document xhtml, ce qui laisse entendre que ce n'est pas indispensable. Quoiqu'il en soit, il ne précise pas non plus que c'est incorrect. Il dit juste que c'est indispensable en xhtml servi en tant que html. C'est ce qu'on appelle le flou artistique... Smiley langue

Bref, pour ma part, je mets toujours les deux dans ce cas parce que la meta n'est pas invalide et que dans le doute, je préfère en faire trop...

a écrit :
Sinon, pour ce qui est de l'arrière-plan appliqué directement au body, est-ce un bug de Firefox?

Non, ce n'est pas un bug...

Si tu prends un vrai document xhtml (donc servi comme du xml) et que tu lui appliques une feuille de style, l'élément racine est html et non body comme c'est le cas en html. Aussi, tu peux appliquer n'importe quel style css sur n'importe quel élément mais la prise en compte laisse parfois à désirer suivant le navigateur utilisé d'où le fait qu'on évite de servir du vrai xhtml à tout le monde. Maintenant, il faut savoir qu'en xml, il n'y a pas de marges par défaut, pas de padding, pas de bordures, pas de puces, ... nada.

Avec l'entête que tu as donné, Firefox traite le document comme du xml alors que IE le traite comme du html, d'où cette différence de rendu... Du coup, tu es amené à être nettement plus pointilleux avec Firefox.

J'avais fait un test sur un document xml, il y a de ça deux mois et j'en avais fait part dans un sujet du forum... Comme tu peux le constater, la prise en compte est un peu cahotique suivant ce qu'on emploie... Smiley ravi

Modifié par koala64 (03 Jan 2007 - 20:08)

Pages :

Sujet clos

Sémantique web et HTML

[Résolu] XHTML 1.1, body background et Firefox