Compatibilité tout navigateurs Fermé

Question

Bonjour,
je suis en plein developpement de mon site perso, et je découvre (avec une joie modéré) l'usage des CSS (j'utilisais des tableaux jusqu'à maintenant => mauvais élève.. à ma décharge je n'ai pas fait de site depuis 5 ans et les css n'étaient pas aussi developpé.. enfin je crois ? héhé).

Bref, voici mon probleme :
Alors que l'affichage est parfait sur Mozilla, opera ou chrome ! (encore que j'observe un très leger décalage vers le haut de la bande noire d'information, sur la page "galleries"), internet explorer joue son mauvais élève. Gros probleme d'affichage un peu partout, je vous laisse regarder (si besoin je vous en fait l'inventaire, mais peut etre qu'il n'y a qu'une seule cause à tous ces maux.. enfin je l'espere) :

http://www.jbbourgeois.com

La page "contact" est mal affichée quelque soit le navigateur.. c'est normal, ce n'est pas fini :)

Je remarque que seul sous internet explorer apparait la scrollbar verticale (sans ascenseur puisque ce n'est pas nécessaire). Peut etre est-ce là le probleme ? J'utilise la méthode des marges négatives pour centrer ma page horizontalement et verticalement.

jb

kelsett · Answer

Perso, je vois pas d'incompatibilité, mais c'est surement parce que j'ai IE8 qui s'est un peu rattrapé.

Bon, pour commencer, le premier problème d'incompatibilités entre les navigateurs est qu'ils ont des valeurs par défaut pour chaque balise Html, et qu'en général entre IE et les autres ca diffère. Donc l'astuce consiste à remettre à zéro toutes les balises pour ton site, pour qu'elles soient les mêmes pour tout navigateur. Yahoo a créé un petit bout de code sympa pour ca, à placer tout en haut de ta feuille de style (voir ici pour plus d'infos: http://developer.yahoo.com/yui/reset/):

/*
    RESET (http://developer.yahoo.net/yui/license.txt)
    version: 2.2.1
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
/* END RESET */

En général ca régle tous les problèmes, sinon au pire des cas il existe des hacks css pour IE, par exemple pour utiliser une feuille de style différente pour celui ci.

Ciao :)

Compatibilité tout navigateurs

1 réponse

Discussions similaires