Discussion :

[whitespirit]

Bonjour,

J'ai un bug qui apparait que sous IE6, je n'arrive pas à le résoudre.

J'ai un menu css avec des <li> et des <a>. Sous FF ou IE7 la taille " width"de chaque élément de la liste est constitué en fonction du texte à l'intérieure de la balise <a>.

Mais sous IE6 la taille de chaque <li> est égale à toute la largeur du menu prévu, c'est à dire la taille de l'écran. Chaque menu passe un à la suite de l'autre.

Je n'arrive pas à trouver de hack pour résoudre ce problème. Du coup j'ai du figé la taille de chaque élément <li> à 90px ce qui, est entre le vilain et le moche.

Vous pouvez voir le menu sur le site suivant, mais la taille du menu est figé pour IE6 site

Merci de votre aide.

[blueice]

mainlevel-menu_top
n'est pas déclaré...

[whitespirit]

je n'ai pas réussi à ce résoudre ce problème malgré l'ajout de cette classe.

En fait, si je ne spécifie pas de hauteur et largeur dans la classe ci-dessous, la hauteur du bord gauche n'est pas affiché à 100% et la largeur est effacé.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ul#mainlevel-menu_top li a
{
	display: block;
	width: auto !important; 
 
	background:url("../images/menu_onglet_gauche.jpg");
	background-position: left 0px;
        background-repeat : no-repeat; 
 
	height:29px;    /* Corrige le bug des menus sur une ligne à IE6 */
	width:20px;		/* Corrige le bug des menus sur une ligne à IE6 */
	padding-left:18px !important;
	padding-right:18px !important;
	padding-top:10px;
	/*-----------------------------------------------*/
}

et voici le code pour la puce <li>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
ul#mainlevel-menu_top li
{
	display: block;
	float: left;
	width: auto !important;
/*	width: 90px;*/
	height:40px;
 
	background:url("../images/menu_onglet_droit.jpg");
        background-repeat : no-repeat; 
	background-position: right 0px;	
}

Sur le site j'ai donc corrigé en fixant la taille :
height:29px; /* Corrige le bug des menus sur une ligne à IE6 */
width:20px; /* Corrige le bug des menus sur une ligne à IE6 */

Mais ce que je ne comprends pas, c'est que certains textes sont sur 2 colonnes sur IE6 alors que sur IE7 et FF, ces textes sont entiers (cf: "nos garanties", "notre gamme").

Merci de votre aide

[blueice]

je n'ai pas réussi à ce résoudre ce problème malgré l'ajout de cette classe.

Tu ne sais pas ce que fait ton code ??? Je dis qu'elle manque car elle existe dans le code HTML sans être déclarée, sinon qu'elle est la classe qui gère ce menu ?

P.S. : Plutôt que d'écrire plusieurs lignes pour un background :

Code :

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

1
2
 
background:#FFFFFF url('image.jpg') no-repeat 0 0;

[whitespirit]

En fait, cette partie de code, je l'ai repris sur le site "aListAPart". Je l'ai adapté pour mon CMS qui génère le menus en li. La classe qui manque a été généré par le CMS, et je n'en ai pas eu besoin pour l'adapter

Maintenant je sais ce que fais le code, je n'ai pas de problème pour IE7, FF2 et Safari. IE6 me pose des problèmes seulement à ce niveau.

Voici les deux classes manquantes (j'en ai d'autre mais je ne crois pas qu'elles soient la cause de mon malheur)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* On affiche les menus collé à droite. Sinon, ils sont centrés */
#menu_top {
	padding-left: 3px !important;
	padding-left: 0px;
	padding-right: 0px !important;
	padding-right: 0px;
	/*border-bottom: 2px solid #ccc;*/
 
}
 
#menu_top ul {
	padding: 0px;
	margin: 0 ;
	margin-left:0px;
	margin-right:0px;
}

Merci de ton aide.