RESOLU - [XHTML/CSS] Menu ok... sauf sur ie! - Problème d'affichage chez microsoft

Logiciel & apps Programmation
1

Bonjour à tous, je suis nouveau sur le forum…
J’ai réalisé un menu (en me basant sur divers sites) qui, oh joie fonctionne parfaitement… jusqu’à ce que je le test sur IE (6). Et là, horreur.
Après avoir chipotté pendant quelques heures sans succès, je suis finalement résolu à venir crier à l’aide ici même car, sincèrement, je ne sais vraiment plus quoi faire…
Si quelqu’un à une solution…

Le script se trouve sur http://divers.titib.com/menu/ mais je le met également ici:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml?#34;>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu</title>
<style type="text/css">
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
	font-size: 0.8em;
}

.widget {
	margin:0 87px;
	padding:0;
	height:32px;
	float:right;
	background-color:#FFFFCC;
	background-image:url(images/widget.jpg);
	background-repeat:repeat-x;
	overflow:hidden;
}
.widget ul 
{
	margin: 0;
	padding:0; 
}
.widget li {
	background:none;
	display:inline;
	font-size:11px;
	float:left;
	text-transform:uppercase;
}
.widget li a {
	display: block;
	height:60px;
	padding-top:4px;
	text-decoration:none;
	color:#FFFFFF;
}
.widget li.widgetgauche a {
	background:url(images/widget2.jpg) top left transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetgauche a:hover {
	background:url(images/widget2b.jpg) top left transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetcentre a {
	background:url(images/widget2.jpg) -30px 0 transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetcentre a:hover {
	background:url(images/widget2b.jpg) -30px 0 transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetdroite a {
	background:url(images/widget2.jpg) top right transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}
.widget li.widgetdroite a:hover {
	background:url(images/widget2b.jpg) top right transparent no-repeat;
	padding-left:10px;
	padding-right:10px;
}


</style>
</head>

<body>
	<ul class="widget">
  <li class="widgetgauche"><a href="#">Menu 1</a></li>
  <li class="widgetcentre"><a href="#">Menu 2</a></li>

  <li class="widgetcentre"><a href="#">Menu 3</a></li>
  <li class="widgetcentre"><a href="#">Menu 4</a></li>  
  <li class="widgetdroite"><a href="#">Menu 5</a></li>
	</ul>
	
	
</body>
</html?#62;

La seule solution que j’ai trouvé pour l’instant pour résoudre le problème est de rajouter un width:x px; dans le .widget li { }. Du coup l’affichage se fait de manière similaire sur IE et “tous les autres”, mais cela oblige à modifier la largeur en fonction du contenu, chose qui est pas pratique du tout. Je cherche donc une technique permettant de s’adapter à la largeur du texte (Menu 1, 2,…).

Merci d’avance,

titib

2

pas d’idée? :s

3

Si tu expliquais le problème déjà? (ça marche chez moi, mais comme je sais pas ce qu’est le comportement suspect…)

4

Ca marche sur ie 6?
Pcq si oui je comprend rien.
L’affichage est différent sur IE 6 et sur n’importe quel autre navigateur (pour changer).

Voilà ce que ca donne: http://divers.titib.com/menu/bug.jpg

5

Ah pardon, j’ai IE7

6

Je crois que tu devrais regardé cette page. Ton code pourrais ressemblé à:


.widget ul:before {
width: 23px;
padding: 0 23px 0 0;
background: white url(gauche.jpg) 0 0;
content: "";
}
.widget ul:after {
width: 23px;
padding: 0 23px 0 0;
background: white url(droite.jpg) 0 0;
content: "";
}

Le hack dans la page ne semble pas fonctionné dans IE7 :smiley: il doit surment en avoir un de disponible… Bonne chance :wink:

7

déjà regardé ce script, et autant que j’ai pu le testé, l’affichage se fait mal dans IE6. (les arrondis n’apparaissent pas). N’ayant pas IE7 à disposition…

je vais malgré tout regardé de plus près, mais ca me semble pas optimal.
Une autre idée?

8

Je dirais met ton menu dans un tableau mais c’est complètement désuet… :ane:

Il y a aussi la possibilité d’utiliser une image de fond et ajouter le menu par dessus, tu pourrais ainsi avoir la forme que tu veux mais pas d’ajustement selon la longeur des chaines de caractère :frowning:

9

les tableaux, je ne veux même pas répondre à cette horreur :stuck_out_tongue:
sinon, concernant la taille du menu fixe, il me suffit de rajouter width:Xpx, c’est simple, mais disfonctionnel.
Je pourrais aussi me dire “fuck m$” mais c’est un peu louche.
Autre solution, tout aussi bancale: faire un js qui detecte le navigateur et ajoute une largeur de menu elevée si il s’agit d’ie6 ou inférieur. L’interêt étant d’avoir un menu qui s’affiche “correctement” sur ie6 et inférieur, et bien sur les autres. Mais je ne prône pas ce genre de solution, au contraire…

Donc personne ne sais?

10

Solutionné par No6 de macbidouille: http://divers.titib.com/menu/macbid.html