[Résolu] Compatibilité IE/FF

[Gabriel]

Bonjour à tous !

J'ai un problème de compatibilité entre IE et les autres naviguateurs.

Pour le voir, pas besoin de grands discours ni de screen -shot de ma part, regardez juste le menu à gauche de cette page : http://www.lost-in-space.webou.net/index.php
avec IE et avec un autre naviguateur.

Il y a une espèce de marge entre les images que je n'arrive pas à enlever...

Code :

<ul>

<li><a href="index.php"><img onmouseover="src= 'images/images_index/accueil2.gif'"src="images/images_index/accueil.gif" onmouseout="src= 'images/images_index/accueil.gif'" border="0" alt="logo accueil" title="Aller à l'accueil" /></a></li>

<li><a href="inscription.php"><img onmouseover="src= 'images/images_index/inscrire2.gif'"src="images/images_index/inscrire.gif" onmouseout="src= 'images/images_index/inscrire.gif'" border="0" alt="logo inscription" title="S'inscire" /></a></li>

<li><a href="apercu.php"><img onmouseover="src= 'images/images_index/apercu2.gif'"src="images/images_index/apercu.gif" onmouseout="src= 'images/images_index/apercu.gif'" border="0" alt="logo aperçu" title="aperçu du jeu" /></a></li>

<li><a href="histoire.php"><img onmouseover="src= 'images/images_index/histoire2.gif'"src="images/images_index/histoire.gif" onmouseout="src= 'images/images_index/histoire.gif'" border="0" alt="logo histoire" title="Découvrez l'histoire du monde" /></a></li>

<li><a href="regles.php"><img onmouseover="src= 'images/images_index/regles2.gif'"src="images/images_index/regles.gif" onmouseout="src= 'images/images_index/regles.gif'" border="0" alt="logo reglement" title="Consultez le règlement du jeu" /></a></li>

<li><a href="http://universe-quest.forumactif.com/"><img onmouseover="src= 'images/images_index/forum2.gif'"src="images/images_index/forum.gif" onmouseout="src= 'images/images_index/forum.gif'" border="0" alt="logo forum" title="Accéder au forum du jeu" /></a></li>
       </ul>

Merci d'avance !

[Argorate]

Souvent ce genre de truc est du au fait qu'IE a pour defaut un font-size il me semble et même si tu marque rien il te fait un espace.
Essai de réduire le font-size à 1px pour voir^^

[Gabriel]

ça ne change rien...

J'ai essayé en mettant tous les margins et les paddings à 0 mais ça ne change rien non plus

[Argorate]

et pourquoi tu utilises pas un <table>, plutot que de t'embeter avec tes <ul> et <li>?

[Allwise]

Les <table> ça sert à afficher des donnes tabulaires, pas à faire des menus. Enfin, ce que je veux dire c'est qu'il faut utiliser les éléments pour ce pour quoi ils existent.

Sinon, t'as choisi la dtd XHTML 1.0 strict, et ta page est pleine d'erreurs... Tu devrais commencer par les corriger. Après, y a certainement des choses à modif dans le CSS mais avec un code propre et valide, on y voit déjà plus clair

[Gabriel]

J'ai essayé un avec un table.
J'ai mis un display:block; sur les images pour toutes les coller. Sur FF, c'est pareil qu'avant c'est à dire normal !

Mais sur IE, c'est aussi pareil qu'avant....

J'en suis revenu au point de départ.

EDIT : Allwise ==> je suis pas marié avec ce doctype là ^^ Quand tu dit, pleine d'erreurs, c'est par rapport à la validité du W3C ?

[Sephi-Chan]

Si vous codez mal (dans le sens objectif du terme : en ne respectant pas les règles), il ne faut pas s'étonner d'avoir des incompatibilités.

http://validator.w3.org/check?uri=http:/.../index.php

Tu as choisis un Doctype XHTML 1.0 Strict, il faut le respecter.
Tu n'as pas à avoir de balise center, ni d'attributs border, ni de balise u, ni à définir plusieurs fois un même id, et parfois pire !

De plus, en multipliant les lourdeurs, vous multipliez les risques.

Un exemple :

Code :

<img onmouseover="src= 'images/images_index/regles2.gif'"src="images/images_index/regles.gif" onmouseout="src= 'images/images_index/regles.gif'" border="0" alt="logo reglement" title="Consultez le règlement du jeu" />

Avec ce genre de choses, tu risques de t'emmêler dans tes guillemets. Tu n'aurais pas ce genre de risques en externalisant ton Javascript ou en faisant tes rollovers en CSS.

Rien qu'un peu de remise en forme :

Code :

<img    onmouseover="src= 'images/images_index/regles2.gif'"
        src="images/images_index/regles.gif"
        onmouseout="src= 'images/images_index/regles.gif'"
        border="0"
        alt="logo reglement"
        title="Consultez le règlement du jeu" />

Avant de traquez les incompatibilités, assurez-vous d'avoir un code impeccable. Ça peut vous éviter bien des ennuis.


Sephi-Chan

[Allwise]

C'est ça. C'est des petits trucs ; tags mal fermés ( > => /> ), balise center utilisée, et mal fermée, et plusieurs éléments partagent le même identifiant ( dans ce cas on utilise les classes ).

Sinon, pourquoi tu passes tes imgs en display:block ?
Tu peux tiliser les règles du "reset CSS", ainsi ça homogénéisera pas mal de choses pour les différents navigateurs, notamment les margins et les paddings. Ensuite, tu peux spécifier une hauteur à tes <li>, et les mettre en overflow:hidden; de sorte à ce que cette hauteur soit respectée peu importe celle du contenu.

[guile]

Les <table> ça sert à afficher des donnes tabulaires, pas à faire des menus. Enfin, ce que je veux dire c'est qu'il faut utiliser les éléments pour ce pour quoi ils existent.

Et les ul, ol, li sont destinées à afficher des listes, et pas des menus.

Ah je savais que la phrase d'Argorate allait provoquer cette réponse du "ah c'est mal incarné le <table>!!!"

[Sephi-Chan]

Les <table> ça sert à afficher des donnes tabulaires, pas à faire des menus. Enfin, ce que je veux dire c'est qu'il faut utiliser les éléments pour ce pour quoi ils existent.

Et les ul, ol, li sont destinées à afficher des listes, et pas des menus.

Et bien ? Un menu est, par définition, une liste d'éléments.

Ah je savais que la phrase d'Argorate allait provoquer cette réponse du "ah c'est mal incarné le <table>!!!"

C'est bien normal. Encore heureux que certains s'insurgent de lire des choses pareilles.


Sephi-Chan

Edit : Effectivement, tu as changé… Les id non unique et le Doctype… Qui est maintenant un truc complètement bâtard entre le HTML 4.1 et le XHTML 1.0. C'est vrai que c'est cool d'avoir le cul entre deux chaises. Tant d'efforts, ça donne super envie d'aider.