menu : diff. IE8-FF sur page vierge

**evevev** · 14/10/2009, 11h49

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 :

et avec ie8, ça donne ça :

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 ???

Que dois-je modifier dans la css ? :

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
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 :

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 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...

**tzilliox** · 14/10/2009, 13h34

Salut evevev !

Il me semble que le code suivant sera mal interprété sous IE8, car tu indiques que la marge à gauche est de 95% de l'écran :

Code :

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

1
2
3
4
ul.MenuBarVertical ul{
	margin: -5% 0 0 95%;
	(...)
}

Je ferais plutôt ceci :

Code :

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

1
2
3
4
ul.MenuBarVertical ul{
	margin-left: 8em;
	(...)
}

Dis-moi si ça résout tes problèmes

A bientôt,
Thomas.

**evevev** · 14/10/2009, 15h13

Eh bé voilà !!!

Merci beaucoup Thoams. Ce qui me semble curieux, c'est que je n'ai pas déterminé moi ces 95 %, c'est le css que génère automatiquement Dreamweaver quand on crée une barre de menus. C'est une base sur laquelle on travaille ensuite.
J'avais fait des barres avec IE7, sans problème. Avec IE8, ça ne fonctionne pas on dirait...

Quoiqu'il en soit, je poste ta réponse dans le forum de DW et te remercie mille fois !

EV

**tzilliox** · 14/10/2009, 15h21

De rien evevev

C'est un peu le problème des outils de codes automatiques !

Bon courage,
Thomas.

menu : diff. IE8-FF sur page vierge

CSS

Discussions similaires

Partager

Partager