Problème CSS

[bieuzent]

Bonjour à tous,

J'ai un soucis. J'ai le site Astrocea que j'ai essayé de rendre accessible, a priori il n'y a pas de problème.

Toute mes pages sont valides XHTML 1.1, CSS.

Ce que je n'arrive pas à comprendre, c'est que firefox ne m'affiche pas la même chose que IE. Etant donné que mon fichier CSS est valide comment cela se fait-il ?

Le fichier CSS est a l'adresse : Feuille CSS

Merci pour votre aide

Cyrille Bieuzent

[LaurentDenis]

Les mauvaises nouvelles d'abord: Astrocea n'est pas conforme à XHTML1.1, bien que le validateur HTML du W3C affirme sa validité : c'est une donnée qui lui échappe pour l'instant.

En effet, XHTML1.1 est du pur XML, pas du HTML. Il te manque une donnée essentielle pour différencier les deux: le type mime envoyé au navigateur par ton serveur, qui provoquera un traitement différent selon qu'il s'agisse de XML ou de XHTML, y compris au niveau CSS, de la part du navigateur. Pour l'instant, Astrocea est en XHTML1.1 traité en tant que HTML à cause du type mime HTML incompatible avec celui-ci. Il faut donc:

- soit revoir le choix du XHTML1.1, sachant que son numéro de version n'en fait pas la DTD la meilleure parce que la plus récente,

- soit mettre en place les mécanismes de gestion serveur du type mime selon les capacités des navigateurs, qui ne savent pas tous traiter du XHTML1.1 correctement (IE ne sait pas).

Voir à ce sujet:

- http://webstandards.org/learn/askw3c/sep2003.html (en anglais)

- http://www.w3.org/TR/xhtml-media-types/xht...edia-types.html (en anglais)

- http://blog-and-blues.org/weblog/2004/06/1...bruit-pour-rien (en français, tiré des précédents)

Au plus simple, Astrocea est sans doute valide et conforme en XHTML1.0 transitional ou strict, et n'a peut-être pas besoin de XHTML1.1 s'il n'utilise pas le langage MathMl.

Les bonnes nouvelles ? L'une des différences de rendu CSS gênantes est due aux propriétés CSS par défaut des listes <ul> propres à chaque navigateur: IE, Mozilla/FifeFox, Opera, ont chacun leur marge de manoeuvre dans ce domaine. Voir Gérer l'espace à gauche d'une liste selon les navigateurs.

[bieuzent]

Bonjour,

Merci pour ta réponse plus que précise.

Mais néanmoins les padding et les margin sont bien indiqué dans le CSS.

Si nous prenons la partie concernant l'entête de la page. Le code du CSS est le suivant :

#entete{
	position:absolute;
	top:0;
	width:97.5%;
	left:0;
	background-color:#7B8FD6;
	background-position:top right;
	background-repeat:no-repeat;
	border:2px solid #000;
	padding:3.5em 0 3.5em 2%;
	margin:0 0 0 1%;
}

Dans IE, le cadre noir entoure bien le logo et le moteur de recherche, mais dans Firefox le cadre descend beaucoup plus bas et me prend une partie du cadre principal et me masque le titre du pavé de texte.

J'avoue ne pas bien comprendre les choses

Modifié 25 Novembre 2004 par bieuzent