Discussion :

[aquafafa]

Bonjour,

mon probleme est le suivant: j'ai un menu dont les liens vers les differentes pages sont des images . Ces images s'affichent correctement dans Firefox et Safari mais elles ne s'affichent pas dans IE ce qui rend inutilisable le menu du site. Les internautes n'ayant alors access uniquement la page d'accueil dans IE.

Voici le code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<ul id="menu">
<li><a href="index.php"<img style="width: 300px; height: 85px;" alt="web][fc" src="media/banniere.png"></a> | </li>
<li><a href="sites_internet.php"<img style="width: 155px; height: 40px;" alt="sites internet" src="media/menu1.png"></a> | </li>
<li><a href="fotoc.php"<img style="height: 40px; width: 155px;" alt="reportages photo" src="media/menu2.png"></a> | </li>
<li><a href="portfolio.php"<img style="height: 40px; width: 155px;" alt="portfolio" src="media/menu3.png"></a> | </li>
<li><a href="contact.php"<img src="media/menu4.png" alt="contact" style="height: 40px; width: 155px;"></a></li>
</ul>

et le code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
a img
{
border:none;
}
#menu li
{
display:inline;
}

Avez vous une solution ?

Merci par avance

[Dionyzos]

Bonjour aquafafa,

Le problème vient du fait que ton code HTML est incorrect. D'ailleurs c'est étonnant que Firefox accepte se type d'erreur sans broncher.

Bref, le problème vient du fait que tu as mal fermé tes balise A, et que tes balises IMG sont enchevêtrées dans les balises A.

Voici le code HTML correct :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<ul id="menu">
    <li><a href="index.php"><img class="banniere" src="media/banniere.png" alt="web][fc" /></a> | </li>
    <li><a href="sites_internet.php"><img src="media/menu1.png" alt="sites internet" /></a> |</li>
    <li><a href="fotoc.php"><img src="media/menu2.png" alt="reportages photo" /></a> |</li>
    <li><a href="portfolio.php"><img src="media/menu3.png" alt="portfolio" /></a> |</li>
    <li><a href="contact.php"><img src="media/menu4.png" alt="contact" /></a></li>
</ul>

Et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    a img { border:none; }
    #menu li { display:inline; }
    #menu li a img { width: 155px; height: 40px; }
    #menu li a img.banniere { width: 300px; height: 85px; }

Maintenant ça devrait marcher

PS: J'en ai profité pour optimiser un peu ton code en déplaçant les styles du HTML dans la partie CSS.

[aquafafa]

Probleme resolu grace a votre code.

Merci beaucoup