Xhtml/CSS (bugs de divs)

Salut,

J'ai un léger problème avec une page web que j'ai déjà mise au point plusieurs fois mais qui n'est pas encore assez bien (problèmes de DOCTYPE etc).
Le problème est que la page ne s'affiche pas tout a fait de la meme manière sur firefox et sur IE. Je ne sais pas comment faire pour que l'affichage soit exactement le meme sous ces deux navigateurs.

Voici ma page web et son CSS

Le problème est que la page s'affiche correctement sur IE et pas sur Firefox.

Pouvez vous m'aider?
Modifié par Makkhdyn (26 Feb 2005 - 16:06)

Bonjour Makkhdyn et bienvenue sur le forum Alsacréations !

La première chose à faire est de virer le prologue qui fait passer IE en mode « Quirk ».

[#red][b]<?xml version="1.0" encoding="iso-8859-1"?>[/b][/#]

Par ailleurs, il est inutile en XHTML servi en tant que "text/html".
Modifié par Stephan (22 Feb 2005 - 23:22)

Bonjour,

Deux liens qui pourraient peut-être t'être utiles :

http://openweb.eu.org/articles/dimensions_boites_css/

http://www.alsacreations.com/articles/compatibilite/

@Stephan: Merci pour ta bienvenue. Quand au problème du XML je l'ai déjà réglé en php avant.

<?php
if(stristr($HTTP_SERVER_VARS["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-type: application/xhtml+xml;");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n";
}else{
header("Content-type: text/html; charset=iso-8859-1");
} ?>

Donc ce n'est pas le mode Quirk de IE qui doit en être la cause (ou alors une autre chose l'a activé).

@thierry: Je te remercie pour tes liens mais hélas la méthode proposée dans le premier lien est seulement pour IE5 (si j'ai bien compris) et celles du second lien sont inéfficaces.
Modifié par Makkhdyn (23 Feb 2005 - 04:53)

Stephan a écrit :
Au passage, faudrait revoir l'usage que tu fais des images parce que ceci n'est vraiment pas « top » :

<img src="images/separateur.gif" style="width:37px;" height="33px" alt="separateur" />

Dans ce contexte, l'attribut alt="" DOIT être vide, sinon un navigateur vocal lira le texte alternatif entre chaque lien ce qui n'est pas souhaitable pour des raisons évidentes.

Sauf si ces images jouent effectivement le rôle de séparateurs entre des liens adjacents. Cependant, dans ce cas, un alt="|" serait plus approprié que le alt="separateur".
(Ou au moins, disons un alt="séparateur" )

Arff... Je n'avais pas vu ça sous cet angle

C'est le gros bon sens !

Merci pour les précisions

Stephan a écrit :
Puis quelques meta http-equiv ne seraient pas de trop : (...)

Pourquoi ? Source ?

@+, HoPHP

HoPHP a écrit :

Pourquoi ? Source ?

J'ai même pas envie de répondre tellement ça me semble évident...
Surtout venant de toi, HoPHP

The W3C Markup Validation Service a écrit :

No Character Encoding Found! Falling back to UTF-8.

I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to reliably validate the document. I'm falling back to the "UTF-8" encoding and will attempt to perform the validation, but this is likely to fail for all non-trivial documents.

So what should I do? Tell me more...

Lire : Spécifier la langue d'un document (X)HTML et Introduction aux jeux de caractères

Merci pour vos réponses (jai tout modifié c'est tout beau maintenant.) mais le problème du décalage du header sous Firefox a toujours lieu (et ce malgrès le * {margin:0; padding:0} ).
Alors maintenant une idée a gérmée dans ma tête. Comme en normale tout devrais marcher peut être ai je fait une erreur dans mon fichier CSS (ou dans mon xhtml)?
Sans vous commander j'aimerais que vous jettiez un coup d'oeil afin de vérifier qu'il ne s'agit pas de cela (les validateurs W3C me disent quand meme que c'est correct.).

PS: J'ai fini par virer le XML qui finalement ne me servait a rien.

Oui, mais euh...

Je ne connaissais pas celui-là:

<meta http-equiv="Content-Style-Type" content="text/css" />

À quoi sert-il ? N'ya-t-il pas déjà la balise <link> ?

Personnellement, je mets ça :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

et ça suffit, non ?

@+, (et désolé de mon ignorance ), HoPHP

Makkhdyn a écrit :
Merci pour vos réponses (jai tout modifié c'est tout beau maintenant.) mais le problème du décalage du header sous Firefox a toujours lieu (et ce malgrès le * {margin:0; padding:0} ).
Alors maintenant une idée a gérmée dans ma tête. Comme en normale tout devrais marcher peut être ai je fait une erreur dans mon fichier CSS (ou dans mon xhtml)?
Sans vous commander j'aimerais que vous jettiez un coup d'oeil afin de vérifier qu'il ne s'agit pas de cela (les validateurs W3C me disent quand meme que c'est correct.).

PS: J'ai fini par virer le XML qui finalement ne me servait a rien.

C'est un problème assez fréquent de hauteur de ligne. Tu peut, dans ton cas corriger facilement en remplaçant dans ton HTML, la ligne :

<div style="margin:0; padding:0; border:0">

Par :

<div style="line-height:1px;">

margin:0; padding:0; border:0 -> Ne servent à rien dans ton cas

line-height:1px; -> Passe la hauteur de ligne par défaut dans ton div à 1 pixel. Cela suffit à corriger le petit décallage sous FireFox.

Par contre concernant ton code, tu pourrais essayer de réduire un peu le nombre de bocs (div) utilisés, supprimer les derniers tableaux.

Essaie aussi de remplacer les attributs HTML du genre border="0", etc par des equivalent CSS. Aussi ça ne serait pas du luxe de placer tes styles complètement dans ton fichier CSS (contrairement à l'exemple que je t'ai donné donc).

L'affichage de ton modèle ne fonctionne pas bien du tout sous IE5.x. Des problèmes de box model et de centrage apparaissant sous ce navigateur.

Bonne chance pour la suite.
Modifié par jb_gfx (24 Feb 2005 - 13:40)

Désolé d'avoir mis si longtemps a répondre.
Tout d'abord jb_gfx je te remercie car ta solution est parfaite.

Puis par rapport au div j'en ai supprimé pas mal entre temps mais pour le tableau je ne voix aucune solution autre que celle que j'ai employée.
Les attributs HTML ne sont là que pour le début avant de tout mettre complètement sur la page css.
Sous IE 5.x il y a encore effectivement cette erreur de décalage que je n'arrive pas a supprimer malgrès toutes mes tentatives.

Donc en fait il me reste deux problèmes maintenant:
-la supression du tableau pour le menu en en-tête
-La compatibilité avec IE 5.x (mac inclus)