Image invisible sous IE

[TylerD]

Salut,

J'ai un petit soucis, j'ai une DIV qui contient plusieurs autres DIV comme suivant :

<div id="principale">
<div id="01">
<img src="vignettes/01.gif" />
<p>01-03-2005 : <a href="01.php">Page 1</a>.</p>
</div>
<div id="02">
<img src="vignettes/02.gif" />

<p>02-03-2005 : <a href="02.php">Page 2</a>.</p>
</div>
<div id="03">
<img src="vignettes/03.gif" />
<p>03-03-2005 : <a href="03.php">Page 3</a>.</p>

</div>
<div id="04">
<img src="vignettes/04.gif" />
<p>04-03-2005 : <a href="04.php">Page 4</a>.</p>
</div>
</div>

Et voici le code CSS correspondant :

#principale img {
float: left;
padding: 0.25em;
}
#principale a{
text-decoration: none;
}
#principale p{
vertical-align: middle;
}
#principale div {
margin : 0 5em 2px 5em;
padding : 1em;
vertical-align:middle;
min-height:80px;
background-color: #EEEEEE;
border : 1px dashed #000000;
}

Et le problème est que sous IE je ne voit pas les images, elles n'apparaissent pas alors que sous FF pas de problème !

Si quelqu'un peut m'aider à comprendre car là je sèche un peu.

Merci d'avance

[DjMiX]

Tu as essayé de mettre le chemin complet ?

C'est à dire http://www.tonsite.tld/vignettes/01.gif au lieu de vignettes/03.gif

Modifié 13 Mars 2005 par DjMiX

[Monique]

Bonjour,

Une petite remarque à propos du nom de tes attributs id :

En CSS2, les identifiants  (ainsi que les noms des éléments et ceux des classes et des IDs des sélecteurs) ne peuvent contenir que les caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc <div id="01"> est un mauvais choix.

[petit-ourson]

De plus pour complêter les propos de Monique, il me semble que IE a quelques soucis avec les underscore dans les id.

[Monique]

C'est vraiment un mystère

TylerD a aussi posé la question sur le forum Alsa et y donne une information supplémentaire : il s'agit du même problème que sur cette page.

L'image est bien connue de IE, je peux accéder à ses propriétés en cliquant sur la zone où elle devrait normalement s'afficher

Pourquoi ne s'affiche-t-elle pas alors ?

[Maxim]

c'est pas du tout un mystere, c'est une grosse connerie !!

vive MSIE...

le problème vient du float: left.

la solution :

mettre position: relative; dans l'image

[TylerD]

Merci pour vos réponses, en effet, j'ai enlevé les float:left et ça marche impec'.

En revanche, je voulais juste préciser :

Une petite remarque à propos du nom de tes attributs id :

En CSS2, les identifiants  (ainsi que les noms des éléments et ceux des classes et des IDs des sélecteurs) ne peuvent contenir que les caractères parmi [A-Za-z0-9] et ISO 10646 supérieurs à 161, ainsi que le tiret (-) et le souligné (_) ; ils ne peuvent commencer ni par un tiret ni par un chiffre.

Donc <div id="01"> est un mauvais choix.

Ce sont juste des exemples qu ej'ai pris pour que ça soit plus simple à la lecture pour le forum...

[Monique]

Ce sont juste des exemples qu ej'ai pris pour que ça soit plus simple à la lecture pour le forum...

<{POST_SNAPBACK}>

La prochaine fois choisis plutôt <div id="img01"> comme exemple, cela t'évitera qu'une mêle-tout comme moi ne te fasse une remarque