menu : diff. IE8-FF sur page vierge
Bonjour ! :)
J'ai posté ce message sur le forum de DW pour tenter de résoudre mon problème, mais comme je suppose que ce n'est qu'un problème de css, je viens par ici, et supprimerai mon message là-bas si je trouve la solution ici...
J'ai fait une chose très simple : dans une page vierge, j'ai mis une barre de menus. Et j'ai une énorme différence ente FF et IE8 ! :?
Dans FF, ça donne ça, tout va bien :
http://www.crozon-bretagne.com/ff-bis.jpg
et avec ie8, ça donne ça :
http://www.crozon-bretagne.com/ie8-bis.gif
J'ai coupé avec des bandes rouges l'écran pour ne pas faire une image trop grosse, mais les sous-menus sont complètement à droite de l'écran (regardez l'ascenseur horizontal en bas...)
Pourquoi ça fait ça à votre avis ??? 8O
Que dois-je modifier dans la css ? :
Code:
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| @charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarVertical li
{
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
margin: 0;
}
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
ul.MenuBarVertical ul li
{
width: 8.2em;
}
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
background: #FFF;
float: left;
}
} |
La page elle-même :
Code:
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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
<body><table><tr><td width="200">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Elément 1</a>
<ul>
<li><a href="#">Elément 1.1</a></li>
<li><a href="#">Elément 1.2</a></li>
<li><a href="#">Elément 1.3</a></li>
</ul>
</li>
<li><a href="#">Elément 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Elément 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Elément 3.1</a>
<ul>
<li><a href="#">Elément 3.1.1</a></li>
<li><a href="#">Elément 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Elément 3.2</a></li>
<li><a href="#">Elément 3.3</a></li>
</ul>
</li>
<li><a href="#">Elément 4</a></li>
</ul></td></tr></table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> |
Merci d'avance pour un petit tuyau... :)
