[Résolu]Background-image qui ne s'affiche pas sous IE

Bonjour,

J'ai un problème sur IE6 et IE7 où j'ai une background-image qui ne s'affiche pas. Sur FF et Opera, ce bloc s'affiche bien.

J'ai isolé le problème qui est visible sur cette page : http://www.fleuveblanc.com/test/test27/test27.html

Je ne parviens pas à comprendre d'où ça peut venir. Si vous avez des idées, je suis vraiment preneur.
Modifié par fleuveblanc (29 Nov 2007 - 18:22)

Peut-être vaudrait-il mieux simplifier un peu? Tu utilises 5 div imbriquées alors que deux suffiraient largement.

Exemple:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Pour le problème dans IE: difficile à dire à vue de nez. Tu dis «j'ai isolé le problème», mais la seule chose qui est isolée ici c'est le code HTML. Côté CSS, c'est un peu le bazar complet, avec N feuilles de styles et surtout des feuilles de styles pour IE directement dans le head via des commentaires conditionnels.

J'ai un peu l'impression que tu n'as pas compris le principe des correctifs CSS avec les commentaires conditionnels...

Merci de ta réponse.

Ca n'est pas possible de simplifier le code ou du moins l'imbrication des modules. A la base c'est dans une page sous joomla (un cms). Je n'ai gardé que l'imbrication de div pour rendre les choses plus claires, mais ces divs servent tous à d'autres choses par ailleurs quand on reviens à la page d'origine sous joomla.

Pour ce qui est de l'isolation en HTML seulement, tu as tout a fait raison. J'ai fait ça pour rendre le code plus lisible, mais je n'en ai fait que la moitié. C'est mis à jour.

Pour les commentaires conditionnels et autres hacks dans le head, ils ne sont manifestement pas liés à ce problème. Du coup, je les ai supprimé de mon fichier. J'ai peut-être mal compris comment les utiliser. Je reste ouvert aux conseils sur ce point.

Si je peux faire autre chose pour rendre le problème plus clair, n'hésitez pas.

fleuveblanc a écrit :
Pour les commentaires conditionnels et autres hacks dans le head, ils ne sont manifestement pas liés à ce problème. Du coup, je les ai supprimé de mon fichier. J'ai peut-être mal compris comment les utiliser. Je reste ouvert aux conseils sur ce point.

Ben déjà si tu utilises des commentaires conditionnels tu ne devrais pas avoir besoin de hacks.
Ensuite, si tu as beaucoup de choses à mettre dans une feuille de correctifs CSS pour IE appelée via un commentaire conditionnel, mieux vaut la mettre en externe également.
Enfin, dans une feuille de correctifs CSS on ne met que des correctifs, et pas le styles d'éléments complets, et encore moins une «feuille de styles alternative». Le fait qu'on ait utilisé les commentaires conditionnels ne forcera pas IE à ignorer les autres feuilles de styles appelée conventionnellement, et par ailleurs maintenir deux feuilles de styles complètes et séparées, c'est prise de tête au possible (et donc couteux).

Salut,

A vue de nez un problème de haslayout ... un height: 1% ou width: 100% à ton bloc du centre (celui qui n'apparait pas)

@ Florent : Je t'accorde complètement qu'au niveau compatibilité, j'ai fait un truc bien bordelique :
- J'ai une feuille de style qui correspond à mon template
- 2 à 3 de plus qui correspondent à des extensions de joomla
- un commentaire conditionnel pour IE
- un de plus (commentaire conditionnel) pour IE6 et inférieur
- il me semble qu'on appelle pas ça vraiment un hack, mais j'ai aussi du javascript pour opera et safari
A la base, je ne pensais pas que ça me prendrait autant de place, mais (principalement à cause de background-image sur des input:submit), je me suis laissé débordé.

Tu as raison de me le faire remarquer et c'est clair que je vais mettre un peu d'ordre dans tout ça. Merci pour tes précisions sur les commentaires conditionnels.

ghost a écrit :
A vue de nez un problème de haslayout ... un height: 1% ou width: 100% à ton bloc du centre (celui qui n'apparait pas)

BINGO ! C'est exactement ça et ça règle mon problème.

Merci beaucoup.