comportement différent entre firefox et IE8

khaic · 05/05/2011, 12h37

Bonjour,

<CODE HTML>

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title>essai menu</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu" />
<meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" />
 
<link href="style3.css"   media="screen" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
<ul id="menu">
   <li class="menu1"><a href="#">Home</a></li>
   <li class="menu1 fleche_down">About us
      <ul>
         <li class="menu2"><a href="#">History</a></li>
	     <li class="menu2 fleche_right">The team
          <ul>
	       <li class="menu2"><a href="#">Khalil<a></li>
	       <li class="menu2"><a href="#">Amine<a></li>
	       <li class="menu2"><a href="#">Ayoub<a></li>
	       <li class="menu2 menu2_dernier"><a href="#">Bachir<a></li>
	      </ul>
         </li>
         <li class="menu2 menu2_dernier"><a href="#">Our vision</a></li>
      </ul>
   </li>
   <li class="menu1 menu1_dernier"><a href="#">Clients</a></li>
</ul>
 
</body>
 
</html>

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
*{
 margin: 0;
 padding: 0; 
}
 
#menu li,
#menu ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
}
 
ul#menu{
 position: relative;
 z-index: 1;
}
 
ul#menu li{
 float: left;
}
 
ul#menu ul{
 float: none;
}
 
ul#menu li:hover{
 position: relative;
 z-index: 3;
}
 
ul#menu ul{
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 2;
}
 
ul#menu ul ul{
 top: 1px;
 left: 99%;
}
 
ul#menu li:hover > ul{
 visibility: visible;
}
 
ul#menu a{
 text-decoration: none;
 color: black;
}
 
ul#menu li{
 color: black;
 background-color: #aaa;
 padding: 0 5px;
 width: 110px;
 text-align: center;
 line-height: 2.1em;
}
 
ul#menu a:hover{
 color: brown;
}
 
ul#menu li:hover,
ul#menu li:focus{
 color: brown;
 background-color: #eee;
}
 
ul#menu li.fleche_down {
 background-image: url("./images/nav-arrow-down.png");
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
 
ul#menu li.fleche_right {
 background-image: url("./images/nav-arrow-right.png");
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
 
ul#menu li.menu1{
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 border-left: 1px solid black;
}
 
ul#menu li.menu1_dernier{
 border-right: 1px solid black;
}
 
ul#menu li.menu2{
 border-top: 1px solid black;
 border-right: 1px solid black;
 border-left: 1px solid black;
}
 
ul#menu li.menu2_dernier{
 border-bottom: 1px solid black;
}

Merci

Nesmontou · 05/05/2011, 12h59

Bonjour,

On pourrait avoir plus de détails ?

Affichage attendu
Affichage réel
...

khaic · 05/05/2011, 13h15

Re-Bonjour,

Oui, pour l'affichage attendu c'est bien celui interprété par firefox, mais avec IE8 il y a un probleme de dédoublent de bordure dans les sous menus

Merci

Bisûnûrs · 06/05/2011, 16h30

Dans ton troisième UL imbriqué, tu ne ferme pas les lien A, tu en ouvres d'autres :

Code html :

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

<li class="menu2"><a href="#">Ayoub<a></li>

05/05/2011, 12h59	#2
Nesmontou Modérateur Benjamin PREVOT Architecte de système d'information Inscription : septembre 2004 Messages : 1 568 Détails du profil Informations personnelles : Nom : Benjamin PREVOT Âge : 30 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Architecte de système d'information Secteur : Finance Informations forums : Inscription : septembre 2004 Messages : 1 568 Points : 2 493 Points : 2 493	Bonjour, On pourrait avoir plus de détails ? Affichage attendu Affichage réel ... __________________ Si vous ne pouvez expliquer un concept à un enfant de six ans, c'est que vous ne le comprenez pas complètement. Albert EINSTEIN F.A.Q. : Java, PHP, (X)HTML / CSS N'oubliez pas de cliquer sur le bouton Résolu en bas de page quand vous avez obtenu une solution à votre problème
	00

05/05/2011, 13h15	#3
khaic Invité de passage Khalil Aïchour Inscription : mai 2010 Messages : 4 Détails du profil Informations personnelles : Nom : Khalil Aïchour Informations forums : Inscription : mai 2010 Messages : 4 Points : 0 Points : 0	Re-Bonjour, Oui, pour l'affichage attendu c'est bien celui interprété par firefox, mais avec IE8 il y a un probleme de dédoublent de bordure dans les sous menus Merci
	00

06/05/2011, 16h30	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Dans ton troisième UL imbriqué, tu ne ferme pas les lien A, tu en ouvres d'autres : Code html : Sélectionner tout - Visualiser dans une fenêtre à part <li class="menu2"><a href="#">Ayoub<a></li>
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email