Design correct sous IE

1 décembre 2005 à 14:25:05

Salut les Zéros !

J'aime assez le design de mon menu, mais le problème, c'est que ça ne rend pas pareil sous IE...
Comme mon site a un pagerank de 2/10 (celui du site du zéro est de 5/10), ce qui n'est pas trop mal, même si j'ignore comment j'en suis arrivé là, puisque mon site ne contient rien de spécial qui soit achevé.
Donc, je voudrais que vous m'aidiez à résoudre le problème de mon menu.
Pour le problème de la transparence des images, je suis en train de faire des captures d'écran à partir de Mozilla pour faire des images JPEG légères, et qui auront le même rendu que les images PNG sur un fond en bares.

Menu actuel sous Firefox :
Image utilisateur

Menu actuel sous IE :
Image utilisateur

Voici le code de la page si elle ne contenait que le premier menu :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Zone D402 - Menu actuel</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design du site" href="design.css" />

</head>

<body>

<div id="allmenu">
<div class="menugeneral">
<img src="coin_menu_haut.png" alt="coin" class="coinhaut"/>
<div class="menu">
<div class="titremenu">
<img src="naviguer.jpg" alt="Naviguer"/>
</div>
<table class="menu">
<tr>
<td class="menu">
<a href="../" class="menu">Accueil</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="worldwars/" class="menu">World Wars</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="?page=grece" class="menu">La Grèce antique</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="?page=liens" class="menu">Quelques liens</a>
</td>
</tr>
</table>
</div>
</div>
<div class="coinmenu">
</div>
<div class="basmenu">
<div class="coindroite">
</div>
</div>
</div>

</body>
</html>

Voici les parties intéressantes de mon CSS design.css :

#allmenu
{
float :left;
margin-bottom: 10px;
}

#logo
{
margin-top: 25px;
margin-bottom: 25px;
margin-left: 25px;
}

.titremenu
{
background-image: url("titre_menu_background.png");
width: 160px;
height: 65px;
}

.menugeneral
{
background-image: url("border-left.png");
background-repeat: repeat-y;
width: 160px;
}

.basmenu
{
background-image: url("border-bottom.png");
height: 10px;
width: 162px;
margin-bottom: 10px;
position: relative;
bottom: 10px;
left: 10px;
}

.coinmenu
{
background-image: url("coin_menu.png");
background-repeat: no-repeat;
height: 10px;
}

img.coinhaut
{
float: left;
}

.coindroite
{
float: right;
background-image: url("coin_menu_droite.png");
background-repeat: no-repeat;
height: 10px;
width: 20px;
}

div.menu
{
background-color: #dcdcdc;
border: solid thin #000000;/*
-moz-border-radius: 0px;*/
width: 160px;
margin-left: 10px;
}

table.menu
{
text-align: center;
margin-top:5px;
margin-bottom:5px;
}

td.menu
{
width: 145px;
min-height:15px;
padding: 5px;
}

a.menu:hover,td.menu:hover
{
background-color: #f8f8ff;
}

coin_menu_haut.png :
Image utilisateur

titre_menu_naviguer.png (pour la version actuellement en ligne) :
Image utilisateur

naviguer.jpg (pour la version à venir) :
Image utilisateur

titre_menu_background.png :
Image utilisateur

border-left.png :
Image utilisateur

border-bottom.png :
Image utilisateur

coin_menu.png :
Image utilisateur

coin_menu_droite.png :
Image utilisateur

Merci d'avance...

EDIT : J'ai fini d'éditer ce message et il vous donne maintenant toutes les informations nécessaires pour résoudre mon problème. Au cas où, je vous laisse tout de même l'adresse de mon site : http://danny402.free.fr/

jp949

1 décembre 2005 à 15:24:49

pour la transparence on y peut rien parcontre pour l'image si tu mets background-repeat:no-repeat; dans #menuglobal ca doit marcher

Danny402

2 décembre 2005 à 18:22:23

Euh... J'ai pas de #menuglobal et je ne sais pas de quelle image tu parles... Peux-tu préciser s'il te plaît ?
(maintenant j'ai plus qu'à vous montrer le listing des images utilisées)

Gyscos

2 décembre 2005 à 19:33:08

OK je vois le problème c'est simplement la transparence. IE gère pas le codage de la transparence partielle... Il y a des codes javascript pour y remédier si tu veux...
ensuite pour la partie du bas, essaye un background-repeat:no-repeat; dans le .basmenu

Danny402

3 décembre 2005 à 6:58:22

J'ai plutôt mis un background-repeat: repeat-x; car l'image n'est pas assez longue, et c'est un peu mieux... (voir nouvel image de IE dans le 1er messages).
Je crois que je vais devoir faire pleins de JPEG...

Autre question : pourquoi la couleur de mes JPEG n'est pas la même que la couleur de fond sous IE ???

Gyscos

3 décembre 2005 à 9:58:34

IE traite mal les images tout court parfois, et change leur rendu en fonction de je sais pas quoi... j'avais des titres à fond gris et sous IE ca faisait comme si la résolution était foireuse (genre 656 couleurs)... j'ai demandé à mon prof d'informatique il m'a dit que y'avait rien à faire.

Danny402

3 décembre 2005 à 15:49:16

Mais pour le bas du menu, au lieu de faire un position: relative;, mettre un tableau qui contiendrai les images coin_menu, border-bottom, et coin_men_droite ?
Et je crois que je devrais refaire toutes les images de bordure pour les couleurs et la transparence remplacée par la couleur du background du body.
Mais comment bien placer le coin_menu_haut ???
Je serais obligé de faire un tableau pour tout mon menu ???

Anonyme

3 décembre 2005 à 16:01:16

C'est une bonne question qui m'intéresse aussi :euh:

J'ai un problèmes assez similaire au tien, je fait un margin-top par rapport aux body, firefox place l'image comme il faut, mais IE me la met 5 pixel plus haut :colere:

Je ne sais pas trop pourquoi, je cherche, je cherche et je tape IE^^