[résolu] Soucis avec les backgrounds sous IE

Bonjour, tout est dans le titre :

Je suis en train de refaire le design de mon site en HTML5. Pour l'instant une maquette en dur, ici : Maquette

Et j'ai un problème de compatibilité entre le HTML5 et IE8 (et peut-être IE9, je ne sais pas encore). Je n'arrive pas à avoir le même rendu sous IE que pour les autres navigateurs, et vraiment si quelqu'un pouvait m'aider à comprendre... car je sèche : un problème d'affichage avec les backgrounds.

Dans un premier temps j'ai pensé qu'il pouvait s'agir d'un problème de déclaration des nouvelles balises à IE. Je sais qu'il faut déclarer en js les nouvelles balises HTML5 non reconnues par IE :

document.createElement("une-balise-à-déclarer");

Je l'ai fais pour un autre de mes petits projets et ça marche. Mais pour mon problème ici présent je ne vois pas...

D'avance merci pour vos éventuelles réponses.
Modifié par Olivier C (18 Jan 2012 - 12:35)

C'est en effet un défaut d'IE<9 par rapport aux nouveaux éléments qui lui sont inconnus.

Pour parer à ceci, il y a la possibilité d'inclure un petit script (dans la section head du document) qui va effectuer les déclarations d'éléments

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Modifié par dew (17 Jan 2012 - 11:09)

bonjour,

il semble, que dans tes valeurs de background, non prises en compte par IE, qu'il manque un espace après la parenthèse du chemin vers l'image. IE a toujours été sensible a ce genre de syntaxe.
ex:

div#title{background:url(../img/top.png)repeat-x 0 bottom}

passerait si

div#title{background:url(../img/top.png) repeat-x 0 bottom}

++

@dew : c'est justement cette solution que j'ai utilisé... les balises sembles prises en compte mais pas les backgrounds...

@gc-nomade : votre réponse m'intéresse de très près. Elle expliquerait pourquoi ce navigateur seulement ne comprendrait pas la valeur background (telle qu'elle est écrite) alors que les balises HTML5 appelées par script sous IE affichent le reste du contenu... Dès que je suis rentre chez moi ce soir je teste votre solution et je ferais un retour ici. Merci beaucoup.

En plus du script il faut déclarer le display en css :

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
time, mark {display:inline;}

Merci Patidou, mais ça aussi je l'avais déjà fait...

Je suis (enfin !) rentré chez moi, je viens de mettre en place les modifs suggérées par gc-nomade. Par contre, je suis sous Mac, pour le résultat sur IE il faudra que j'attende demain pour vérifier (je n'ai pas encore installé IE sous BootCamp).

Je viens de vérifier sur IE : ça marche !

Merci a gc-nomade pour son excellent diagnostic.

Je marque la question en "résolu", et je modifie sa formulation pour qu'elle réponde mieux à la problématique qui n'était pas liée au HTML5 mais à une syntaxe CSS... sujet à déplacer éventuellement par un modérateur...

Bien à vous tous.
Modifié par Olivier C (18 Jan 2012 - 12:38)