28173 sujets

CSS et mise en forme, CSS3

Problème de inline avec Firefox

Bonjour,

Je désire afficher un ensemble de divs centrés sur une page. (Il s'agit en fait d'un de graphiques en flash). Je me suis donc dit que j'allais afficher mes divs en tant qu'éléments inline avec un petit text-align: center sur le contenant. Cela fonctionne très bien sous IE 6 et 7 mais malheureusement pas sous Firefox... Comment faire pour résoudre ou bien contourner mon problème ?

(PS : j'ai entendu parler de la propriété -moz-inline-block mais mes tests ont été sans succès).

Merci.
Voici un exemple :

<!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="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
		h1 {
			font-size: 1.3em;
		}
		#contenant {
			text-align: center;
		}
		.graph {
			/*display: -moz-inline-block;*/
			display: inline-block;
			border: 1px dashed #CCC;
			padding: 10px;
			width: 420px;
			margin: 50px 50px;
		}
		.graph div {
			display: block;
			border: 1px solid red;
			width: 420px;
		}
		body {
			overflow: scroll;
			overflow: hidden;
			font-family:verdana;
			font-size:12px;
			height:100%;
			width:100%;
			padding:0px;
			margin:0px;
		}
	</style>
</head>
<body>
	<div id="contenant">
		<div class="graph">
			<h1>titre 1</h1>
			<div id="graph_1">graph 1</div>
		</div>
		<div class="graph">
			<h1>titre 2</h1>
			<div id="graph_2">graph 2</div>
		</div>
		<div class="graph">
			<h1>titre 3</h1>
			<div id="graph_3">graph 3</div>
		</div>
	</div>
</body>
</html>


Contrairement à ce que j'ai dit plus haut, le comportement n'est pas bon sous IE. Il n'est bon que sous Opera ou Konqueror (les divs s'affichent centrées sur une seule ligne quand il y a la place).

Comment faire pour que cela fonctionne sous IE et sous Firefox ?

Merci.
Ok pour le XHTML 1.1, je ne savais pas.
Toujours est-il que j'ai maintenant une version qui fonctionne sous IE, Opera et Konqueror mais pas sous Firefox. Le seul problème est que les graphes ne passent pas à la ligne après le titre et donc c'est très moche. Si vous avez une idée, car moi je deviens fou Smiley biggol 


<!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="en" >
<head>
	<meta http-equiv="content-type" content="text/xhtml+xml; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
		h1 {
			text-align: center;
			font-size: 1.3em;
		}
		#contenant {
			text-align: center;
		}
		.graph {
			display: inline-block;
			display: -moz-inline-box;
			_display: inline-block;
			border: 1px dashed #CCC;
			padding: 10px;
			width: 420px;
			margin: 50px 50px;
		}
		.graph div {
			display: block;
			border: 1px solid red;
			width: 420px;
		}
		body {
			overflow: scroll;
		}
	</style>
	<!--[if lte IE 7]>
	<style type="text/css">
		.graph {
			display: inline;
		}
	</style>
	<![endif]-->
</head>
<body>
	<div id="contenant">
		<div class="graph">
			<h1>titre 1</h1><br />
			<div id="graph_1">graph 1</div>
		</div>
		<div class="graph">
			<h1>titre 2</h1><br />
			<div id="graph_2">graph 2</div>
		</div>
		<div class="graph">
			<h1>titre 3</h1><br />
			<div id="graph_3">graph 3</div>
		</div>
	</div>
</body>
</html>

Modifié par djib (13 Mar 2007 - 15:52)
Modérateur
Bonjour,

text/xhtml+xml n'existe pas...

Même question que Raphaël : As-tu réellement besoin de xhtml 1.1 ?

et as-tu lu la FAQ ? (réponse: non) Smiley cligne
Bon, j'ai trouvé une solution. J'enveloppe mes titres et mes graphes dans une des divs en display block. Franchement pour une fois Firefox m'a vraiment déçu Smiley decu

Sinon désolé pour ce qui est de text/xhtml+xml, c'est un copier coller un peu rapide. Sinon la réponse est non, je n'ai pas *besoin* de faire du xhtml 1.1...

Pour ce qui est de la FAQ je n'ai fait que la survoler, pourquoi ?
Modérateur
Je te laisse lire... Smiley cligne
La FAQ a écrit :
Entre XHTML 1.0 et XHTML 1.1, la différence est importante au niveau de la déclaration.
Choisir le bon doctype ne suffit pas à déclarer proprement un document XHTML 1.1. (explications : http://www.pompage.net/pompe/declarations/)

En effet, si XHTML 1.0 accepte d'être servi en type mime HTML (content "text/html"), ce n'est pas le cas pour XHTML 1.1 où il faut obligatoirement passer en "application/xhtml+xml", en utilisant la balise meta suivante :
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
Avec également une modification des headers envoyés par le serveur, avec PHP par exemple : header('Content-type:application/xhtml+xml');
De manière générale, Apache et les serveurs Web sont configurés par défaut pour envoyer "text/html" pour des fichiers du type .php, .htm etc..

Pour cette raison, les documents XHTML 1.1 servis en "text/html" sont invalides, quoiqu'en dise le Validateur W3C (bien qu'il valide ce genre de document, il ne devrait pas le faire. Lire à ce sujet les spécifications officielles de XHTML 1.1)

Le problème de l'application/xhtml+xml est qu'elle n'est supportée que par quelques navigateurs graphiques (dont IE6 ne fait pas partie).

A l'heure actuelle, vu les carences des navigateurs, passer en XHTML 1.1 n'a aucun intérêt pour la plupart des utilisateurs actuels du XHTML1.0. D'ailleurs le site du W3C lui-même n'est encore qu'en XHTML 1.0 Voir http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir pour le choix d'une DTD XHTML1.0

Plus d'info sur le récapitulatif suivant, "Servir du XHTML en tant que text/html jugé néfaste" : http://www.hixie.ch/advocacy/xhtml.fr/

Un petit récapitulatif des bons usages et utilisations des doctype, versions d'HTML et leur type MIME :
http://pompage.net/pompe/declarations/

Pour finir à propos de l'extension du fichier : Les navigateurs plus récents supportant XML (Explorer Internet à partir de la version 5.x, Netscape à partir de la version 6.x) traitent les fichiers différemment selon leur extension, s'ils n'ont pas d'indications (type Mime).
Quand vous respectez dans un fichier toutes les règles de XHTML mais sauvegardez le fichier avec les extensions typiques .htm ou bien .html, ces navigateurs utilisent leur analyseur syntaxique HTML. Sauvegardez par contre le fichier avec une autre extension, par exemple .xhtml, alors les navigateurs utilisent leur analyseur syntaxique XML.
La différence se fait avant tout sentir quand le document contient des erreurs de syntaxe. Les analyseurs syntaxiques HTML habituels aujourd'hui laissent tout simplement passer des fautes de syntaxe dans le document et tentent d'afficher le document "tant bien que mal". Les analyseurs syntaxiques XML par contre interrompent avec un message d'erreur dès qu'ils butent sur une faute de syntaxe. Dans la fenêtre d'affichage du navigateur apparaît alors un message d'erreur à la place du document.
Source : http://fr.selfhtml.org/html/xhtml/differences.htm#noms_fichiers

Liens complémentaires

* http://www.blog-and-blues.org/weblog/2004/08/16/275-encodage-caracteres-xhtml
* http://www.alsacreations.com/blog/index.php?2004/11/07/87-standards-etre-plus-royaliste-que-le-roi
* http://www.hixie.ch/advocacy/xhtml.fr/
Modérateur
oui, tout à fait, parce que tu ne l'as apparemment pas lu dans sa totalité... et comme il ne suffit pas de le survoler, je te l'ai remis sous le nez. Smiley smile
Modérateur
oui, comme tu dis, ce n'est jamais agréable de tomber sur des personnes qui ne s'investissent pas lorsqu'on les aide... C'est usant à force. Smiley ohwell

On te donne les explications et tu ne prends pas le temps de les lire.

Je clos la discussion... rien ne sert de continuer dans cette voie.
Sujet clos
Aller à