Discussion :

[kissmytoe]

Bonjour à tout le monde.

Je travail sur un site Web qui fonctionne bien en firefox. Malheureusement il y a un problème avec IE6 et malheureusement il y a encore quelques personnes qui utilisent IE6 et je dois le rendre fonctionnel là dessus aussi.

Sur cette page : http://residences.fsg.ulaval.ca/choi...plet/chambres/

vous pouvez voir que le menu à gauche est différent pour IE6. Le fond de "chambres" devrait apparaître blanc alors qu'il apparaît orange.

Si vous avez la Web developper toolbar ou la IE developper toolbar vous pouvez voir le css attribué : qui est #menu_secondaire .elemmenu3.act.

Si je change le csss de #menu_secondaire .elemmenu2.act. Cela change le menu "chambres" et cesse d'afficher le fond orange non désiré. Il prend donc les options du css qui ne lui appartient pas.

Je ne sais pas si je me suis bien expliqué. Je vais copier les css attribué.

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#menu_secondaire .elemmenu2 {
	background-image: url('../images/menu_1.jpg');
	background-repeat: repeat-y;
	width: 224px;
	height: 40px;
	padding-left: 13px;
	line-height:14px;
	border-top: 3px solid white;
}
#menu_secondaire .elemmenu2 a {
	font-size: 14px;
	font-weight: bold;
	color: #e1e1e1;
	text-decoration: none;
}

.elemmenu3 {
	background-repeat: repeat-y;
	width: 224px;
	height: 24px;
	padding-left: 13px;
	line-height:14px;
	border-bottom: 1px solid white;
}

.elemmenu3.sub {
	background-image: url('../images/menu_3_act.jpg') !important;
	background-repeat: repeat-y;
	border-bottom: 0px solid white;
}

.elemmenu3.act  {
	background-image: url('../images/menu_3_act.jpg') !important;
	background-repeat: repeat-y;
	border-bottom: 0px solid white;
}
#menu_secondaire .elemmenu2.act { <---- Si jenleve le background-image cela affecte le sous menu (par exemple "chambres") qui est en fait #menu_secondaire .elemmenu3.act
	background-image: url('../images/menu_1_orange_hover.jpg')!important;
	background-repeat: repeat-y;
	width: 224px;
}
.elemmenu3 {
	background-image: url('../images/menu_2_orange.jpg');
	background-repeat: repeat-y;
}

.elemmenu3:hover {
	background-image: url('../images/menu_2_orange_hover.jpg');
	background-repeat: repeat-y;
}

.elemmenu3:hover a, .elemmenu3.act a, .elemmenu3.sub a{
	color:#545454;
}

.elemmenu3.sub {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #fe980f;
}

.elemmenu3.act{
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #fe980f;
}

Merci pour tous les gens qui prennent le temps de regarder. Peu importe si vous trouver mon problème ou non, merci beaucoup pour votre temps.

Maryse Tremblay

[Dan_A]

Utiliser la propriété background ( http://www.w3schools.com/css/pr_background.asp ) est beaucoup plus fiable que de définir chacune de ses 5 propriétés.
Par ailleurs, il faut peut-être enlever #menu_secondaire aux règles pour avoir un même poids.

[kissmytoe]

Bonjour à tous,
j'ai finalement trouvé la solution en cherchant sur Internet.

Le probleme était que IE6 ne supporte pas les classes multiples

.elemmenu3.sub étant
<span class="elemmenu3 sub">

Voici la page qui a résolu mon problème :
http://www.ryanbrill.com/archives/mu...classes-in-ie/

Maryse