Ie et border

Bonjour à tous.

Tout d'abord le site en développement (allez voir sur firefox dans un premier temps):
http://www.cocktailone.com

Je suis actuellement en train de finaliser le développement d'un site internet et, une fois n'est pas coutume, internet explorer me pose problème.

J'ai une animation sur la page "accueil" qui représente plus ou moins un tableau de Mondrian dynamique. Pour ceux qui ne connaissent pas, tapez Mondrian sur google images et vous comprendrez tout de suite.

Pour que l'illusion fonctionne, j'ai mis une bordure noire de 10 pixels a mes images. Ce qui fonctionne très bien pour la plupart des navigateurs qui appliquent la bordure a l'extérieur de l'image. IE applique la bordure a l'intérieur de l'image, et donc me pourri mon animation, qui ne ressemble plus a un tableau de Mondrian et en plus me bouffe une partie des textes situés a l'intérieur des images. (cliquez dessus pour que les images s'agrandissent et vous verrez)

J'avais, quand je travaillai le site en local, utilisé la meta X-UA-compatible, qui m'avait corrigé ce défaut ainsi que tous les autres problèmes d'affichage sur ie 8. J'ai donc continué le développement du site sans trop me préoccuper du "cas" IE et ce n'est que récemment après mise en ligne que je suis retourné voir, et que j'ai constaté que tous les problèmes étaient réapparus.

Donc mes questions sont:
-Est-il possible que j'ai commis une erreur de code qui annulerai les effets de la regle X-UA-compatible?
-Si non, comment, avec une feuille de style spécifique IE, corriger le problème des bordures?

Voila j’espère avoir été clair et pas trop pompeux dans mes explications.

Merci d'avance.

Hello.

Tu as des caractères avant ton doctype, donc IE switche en mode quirks avec son vieux modèle de boite proprio.

Les meta X-UA-compatible, c'est le mal. Ne jamais utiliser cette daube qui fait que ton navigateur bosse en dessous de ses capacités, surtout que le support de CSS2.1 d'IE8 est excellent.

Hum je veux bien ne pas m'en servir si tu sais comment mettre les bordures a l'extérieur sur IE.

Sinon merci pour ton explication.

Edit: je ne vois pas de caractères avant mon doctype...
Modifié par aelor (05 Sep 2011 - 21:11)

aelor a écrit :
Hum je veux bien ne pas m'en servir si tu sais comment mettre les bordures a l'extérieur sur IE.

Florian_R a écrit :
Tu as des caractères avant ton doctype, donc IE switche en mode quirks avec son vieux modèle de boite proprio.

D'ailleurs, c'était pas compliqué à trouver : http://validator.w3.org/check?uri=http%3A%2F%2Fwww.cocktailone.com%2Fmenu.php%3Flang%3Dfr%26page%3Daccueil

Edit : Tir croisé. Quand je regarde ta source tu as au moins 2 lignes vides avant ton doctype.
Modifié par Florian_R (05 Sep 2011 - 21:12)

Yes effectivement c'est indiscutable. Pourtant j'ai pas mis d'espace sur le fichier qui contient le haut du site. Ca doit etre qqpart dans les fichiers qui l'appellent.

Je viens de découvrir la propriété { border-spacing : sSpacing } sur un site en anglais.

Ca pourrait peut-etre répondre a mes besoins (j'ai pas tout compris c'était en anglais).

Je n'ai pas trop compris pourquoi la regle X-UA limitait les capacités du navigateur, s'il y a de la doc en français qqpart je suis preneur.

En règle générale : vérifier que les fichiers sont bien enregistrés en UTF-8 sans BOM.

Pour les fichiers PHP qui ne contiennent que du code et aucun fragment de HTML, ne pas fermer avec la balise finale ?> pour éviter que des espaces s'intercalent avant le doctype.

Sinon, border-spacing ne fonctionne que pour les cellules de tableau donc oublie et règle ton souci de doctype, de toutes façons c'est ingérable de travailler avec deux modèles de boites différents.

aelor a écrit :
Je n'ai pas trop compris pourquoi la regle X-UA limitait les capacités du navigateur

Avec

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

tu forces IE8 à utiliser un mode de rendu émulant celui d'IE7 qui est vérolé, alors qu'un site bien conçu à la base passe sans souci sur IE8.

Dans ton cas,

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

fait switcher les utilisateurs de IE6 qui ont Chrome Frame d'installé sur le moteur de rendu de Chrome, c'est pas la meilleure des façons pour être certain d'un rendu uniforme. (et ça c'est un autre débat )
Modifié par Florian_R (05 Sep 2011 - 21:51)

le x-ua te permet d'activer le moteur de rendu de IE7 dans IE8: cela limite les capacités du navigateur simplement dans le sens où tu fais tourner un logiciel dans une version précédente (donc moins aboutie, dans le cas d'ie7, cela concerne notamment le support de css2.1 que Florian a cité).

edit: dsl pour la double explication
Modifié par tilsitt (05 Sep 2011 - 21:54)

Pas grave pour la double explication. Mieux vaut 2 fois qu'une comme on dit.

Si je comprends bien (et j'en suis pas sur)

a écrit :
fait switcher les utilisateurs de IE6 qui ont Chrome Frame d'installé sur le moteur de rendu de Chrome, c'est pas la meilleure des façons pour être certain d'un rendu uniforme. (et ça c'est un autre débat cligne )

Ca veut dire que ceux qui ont pas chrome auront un rendu différent?


En tout cas je viens d'apprendre un bon truc pour le ?> a ne pas mettre. Je me demandais pourquoi qqn que je connais ne le mettait pas. Il aurait pu me le dire le saligaud...

aelor a écrit :
Ca veut dire que ceux qui ont pas chrome auront un rendu différent?

Pas Chrome, mais Chrome Frame. Si ce n'était pas volontaire de ta part, fais sauter la meta et fais les ajustements pour IE6 par toi-même.

Je tiens à préciser que c'est mon 2ème site... Je fais pas mal d'erreurs, je m'en rends compte au fur et a mesure grace a ce site et a ses membres et je vous en remercie au passage.

J'ai toujours un probleme qui va se poser si je fais sauter la meta, a savoir les bordures a l'intérieur de l'image. S'il n'y a pas moyens de corriger ça autrement qu'avec la meta, elle va rester je le crains.