menu vert. spry : position sous-menu IE8 et FF

Version imprimable

menu spry: différence de position sous-menu IE8 et FF

Bonjour à vous !

J'ai un souci d'affichage, pour une barre verticale Spry, dont je n'arrive pas à trouver la cause.
Je ne suis pas experte en css et, en tâtonnant, je n'arrive à rien !

Voici les différences.
IE8 donne ça :
http://www.crozon-bretagne.com/ie8.jpg
Le sous-menu se positionne au-dessus et à gauche du menu.

Et FF donne ça :
http://www.crozon-bretagne.com/ff.jpg
Le sous-menu se positionne à la droite du menu.
J'affinerai la position ensuite, mais c'est cet affichage qui me convient.

Que dois-je modifier pour obtenir le même résultat, ou presque ?

Le fichier 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 8em;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 8em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
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;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 8.2em;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: pointer;
	background-color: #EEE;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
	background-color: #33C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
	background-color: #33C;
	color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarVertical li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

Je mets aussi l'HTML au cas où...

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
             <tr>
               <td align="center"><ul id="ovoiturage" class="MenuBarVertical">
  <li><a href="#" class="MenuBarItemSubmenu">La mer</a>
    <ul>
      <li><a href="#">Un p&ecirc;cheur pro</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">La p&ecirc;che &agrave; pieds</a>
        <ul>
          <li><a href="#">Conseils et r&egrave;glementations</a></li>
          <li><a href="#">Interdiction temporaire</a></li>
          <li><a href="#">Les tellines</a></li>
          </ul>
      </li>
<li><a href="#" class="MenuBarItemSubmenu">La mar&eacute;e</a>
  <ul>
    <li><a href="#">Comment &ccedil;a marche ?</a></li>
    <li><a href="#">Les horaires de mar&eacute;e</a></li>
  </ul>
</li>
<li><a href="#">M&eacute;t&eacute;o marine</a></li>
<li><a href="#">Hu&icirc;tres et moules</a></li>
</ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">La terre</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Crozon</a>
        <ul>
          <li><a href="#">Le march&eacute;</a></li>
          	<ul>
 	          <li><a href="#">Les femmes de pêcheurs</a></li>
    	      <li><a href="#">Jo ! Jo ! Eh Jo !</a></li>
        	  <li><a href="#">Les cornichons</a></li>
 	       </ul>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Camaret</a>
        <ul>
<li><a href="#">B&eacute;n&eacute;diction de la mer</a></li>
<li><a href="#">De la tour Vauban</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Lanv&eacute;oc</a>
        <ul>
          <li><a href="#">Plan du bourg</a></li>
</ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Telgruc</a>
        <ul>
<li><a href="#">F&ecirc;tes patronales</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Roscanvel</a>
        <ul>
<li><a href="#">Les forts</a></li>
<li><a href="#">La pointe des espagnols</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Argol</a>
        <ul>
<li><a href="#">Les vieux m&eacute;tiers vivants</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Land&eacute;vennec</a>
        <ul>
<li><a href="#">L'abbaye</a></li>
<li><a href="#">L'Aulne</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
    </ul>
  </li>
<li><a href="#" class="MenuBarItemSubmenu">Les gens</a>
  <ul>
    <li><a href="#" class="MenuBarItemSubmenu">Les associations</a>
      <ul>
        <li><a href="#">... culturelles</a></li>
        <li><a href="#">... patrimoniales</a></li>
        <li><a href="#">... patriotiques</a></li>
        <li><a href="#">... scolaires</a></li>
        <li><a href="#">... solidaires</a></li>
        <li><a href="#">... sportives</a></li>
        <li><a href="#">... toutes les autres</a></li>
        <li><a href="#">Liste de toutes les associations</a></li>
      </ul>
    </li>
    <li><a href="#">Les entreprises</a></li>
    <li><a href="#">Les commer&ccedil;ants</a></li>
<li><a href="#">Figures de la presqu'&icirc;le</a></li>
  </ul>
</li>
  <li><a href="#" class="MenuBarItemSubmenu">Loisirs et sorties</a>
    <ul>
<li><a href="#" class="MenuBarItemSubmenu">Pas tr&egrave;s loin d'ici...</a>
  <ul>
    <li><a href="#">Oc&eacute;anopolis</a></li>
    <li><a href="#">Le pont de T&eacute;r&eacute;nez</a></li>
</ul>
</li>
<li><a href="#">Les cin&eacute;mas</a></li>
<li><a href="#">La piscine</a></li>
      <li><a href="#">Les vieux m&eacute;tiers vivants</a></li>
      <li><a href="#">La maison des min&eacute;raux</a></li>
</ul>
  </li>
  <li><a class="MenuBarItemSubmenu" href="#">Soyons pratiques...</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Petites annonces</a>
        <ul>
          <li><a href="#">Elément sans titre</a></li>
        </ul>
      </li>
      <li><a href="#">Covoiturage</a></li>
      <li><a href="#">Eph&eacute;m&eacute;ride</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Services de sant&eacute;</a>
        <ul>
          <li><a href="#">Pharmacies de garde</a></li>
          </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Transports</a>
        <ul>
          <li><a href="#">Horaires bus</a></li>
          <li><a href="#">Covoiturage</a></li>
        </ul>
      </li>
</ul>
  </li>
</ul></td></tr>
              <tr> 
                <td width="210" height="500" valign="top"><p class="menugauche">&nbsp;</p>
                 
                  <div align="center"><br />
                    PUBLICITE
                      <br />
                      <script type="text/javascript"><!--
google_ad_client = "pub-2675405768050100";
google_alternate_ad_url = "";
google_ad_width = 200;
google_ad_height = 200;
google_ad_format = "200x200_as";
google_ad_type = "image";
google_color_border = "336699";
google_color_bg = "336699";
google_color_link = "FFFFFF";
google_color_url = "333366";
google_color_text = "99CCFF";
google_ad_channel = "";
//--></script> 
                    <script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                      </script>
                  </div>
                  <p class="menugauche">&nbsp;</p></td>
              </tr>
            </table>

Merci d'avance pour vos conseils éclairés ! :)
EV

09/10/2009, 13h57
Botzouk

Bonjour,

Je pense que le souci ne viendra pas du css généré lors de la création de ton menu, mais plutôt du css que tu as crée en même temps que ta page html.

De plus il faudrait avoir le code de toute ta page car je pense que cela vient de tes positionnements, et si l'on a pas ces deux éléments on ne pourra pas té répondre.

Bonjour et merci de ta réponse... :)
J'ai tenté de supprimer le lien vers l'autre feuille css, et ça n'a rien changé pour l'affichage des menus... :?

Voici le code de toute la page :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!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>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../crozon.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

<body class="fonbody">
<table width="1002" border="0" align="center" cellpadding="0" cellspacing="0" class="foncontainer">
  <!--DWLayoutTable-->
  <tr> 
    <td width="1000" height="195" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="horizon">
        <!--DWLayoutTable-->
        <tr> 
          <td width="1000" height="19" valign="top"><h1 class="slogan">Vacances 
              - S&eacute;jours - Tourisme... Pr&eacute;parez votre voyage &agrave; 
              la Presqu'&icirc;le de Crozon - Bretagne - France - Locations - 
              G&icirc;tes - Camping</h1></td>
        </tr>
        <tr> 
          <td height="120" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr> 
                <td width="238" height="120" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <!--DWLayoutTable-->
                    <tr> 
                      <td width="238" height="120" valign="top"><a href="../index.php"><img src="../images/logo.png" width="238" height="120" border="0" /></a></td>
                    </tr>
                  </table></td>
                <td width="461" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <!--DWLayoutTable-->
                    <tr> 
                      <td width="17" height="14"></td>
                      <td width="428"></td>
                      <td width="16"></td>
                    </tr>
                    <tr> 
                      <td height="60"></td>
                      <td align="center" valign="middle" bgcolor="#336699">
					  			<p class="slogan">Votre publicit&eacute; ici</p></td>
                      <td></td>
                    </tr>
                    <tr> 
                      <td height="16"></td>
                      <td align="center" class="titre"><!--DWLayoutEmptyCell-->&nbsp;</td>
                      <td></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
        <tr> 
          <td valign="top" bgcolor=""><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr align="center"> 
                <td width="450" valign="bottom" ><a  class="titre" href="index.php">Vivre toute l'ann&eacute;e &agrave; Crozon</a></td>
                <td width="450" valign="bottom" ><a  class="titre"href="../vacances/index.php">Vos vacances &agrave; Crozon</a></td>
              </tr>
            </table></td>
        </tr>
        <tr> 
          <td height="25" valign="top"><div align="center"></div></td>
        </tr>
    </table></td>
  </tr>
  <tr> 
    <td height="500" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="210" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
             <tr>
               <td align="center"><ul id="MenuAnnee" class="MenuBarVertical">
  <li><a href="#" class="MenuBarItemSubmenu">La mer</a>
    <ul>
<li><a href="#" class="MenuBarItemSubmenu">La p&ecirc;che &agrave; pieds</a>
  <ul>
          <li><a href="#">R&egrave;glementations</a></li>
          <li><a href="#">Interdiction temporaire</a></li>
</ul>
      </li>
<li><a href="#">Horaires des mar&eacute;es</a>  </li>
<li><a href="#">M&eacute;t&eacute;o marine</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Reportages-photos</a>
  <ul>
    <li><a href="#">En mer, avec les p&ecirc;cheurs</a></li>
    <li><a href="#">La p&ecirc;che aux tellines</a></li>
    <li><a href="#">Hu&icirc;tres et moules</a></li>
  </ul>
</li>
    </ul>
  </li>
  <li><a href="#" class="MenuBarItemSubmenu">La terre</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Crozon</a>
        <ul>
          <li><a href="#">Le march&eacute;</a></li>
          	<ul>
 	          <li><a href="#">Les femmes de pêcheurs</a></li>
    	      <li><a href="#">Jo ! Jo ! Eh Jo !</a></li>
        	  <li><a href="#">Les cornichons</a></li>
 	       </ul>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Camaret</a>
        <ul>
<li><a href="#">Reportage : b&eacute;n&eacute;diction de la mer</a></li>
<li><a href="#">De la tour Vauban</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Lanv&eacute;oc</a>
        <ul>
          <li><a href="#">Plan du bourg</a></li>
</ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Telgruc</a>
        <ul>
<li><a href="#">Reportage : f&ecirc;tes patronales</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Roscanvel</a>
        <ul>
<li><a href="#">Les forts</a></li>
<li><a href="#">La pointe des espagnols</a></li>
<li><a href="#">Plan du bourg</a></li>
<li><a href="#">Reportage : le pardon </a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Argol</a>
        <ul>
<li><a href="#">Reportage : les vieux m&eacute;tiers vivants</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Land&eacute;vennec</a>
        <ul>
<li><a href="#">L'abbaye</a></li>
<li><a href="#">L'Aulne</a></li>
<li><a href="#">Plan du bourg</a></li>
        </ul>
      </li>
    </ul>
  </li>
<li><a href="#" class="MenuBarItemSubmenu">Les gens</a>
  <ul>
    <li><a href="#" class="MenuBarItemSubmenu">Les associations</a>
      <ul>
        <li><a href="#">... culturelles</a></li>
        <li><a href="#">... patrimoniales</a></li>
        <li><a href="#">... patriotiques</a></li>
        <li><a href="#">... scolaires</a></li>
        <li><a href="#">... solidaires</a></li>
        <li><a href="#">... sportives</a></li>
        <li><a href="#">... toutes les autres associations !</a></li>
        <li><a href="#">Liste alphab&eacute;tique de toutes les associations</a></li>
      </ul>
    </li>
    <li><a href="#">Les commer&ccedil;ants</a></li>
<li><a href="#">Figures de la presqu'&icirc;le</a></li>
  </ul>
</li>
  <li><a href="#" class="MenuBarItemSubmenu">Loisirs et sorties</a>
    <ul>
<li><a href="#">Les cin&eacute;mas</a></li>
<li><a href="#">La piscine</a></li>
<li><a href="#">Les vieux m&eacute;tiers vivants</a></li>
<li><a href="#">La maison des min&eacute;raux</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Pas tr&egrave;s loin d'ici...</a>
  <ul>
    <li><a href="#">Oc&eacute;anopolis</a></li>
    <li><a href="#">Le pont de T&eacute;r&eacute;nez</a></li>
  </ul>
</li>
    </ul>
  </li>
  <li><a class="MenuBarItemSubmenu" href="#">Presqu'&icirc;le pratique</a>
    <ul>
      <li><a href="#" class="MenuBarItemSubmenu">Petites annonces</a>
        <ul>
          <li><a href="#">Elément sans titre</a></li>
        </ul>
      </li>
      <li><a href="#">Covoiturage</a></li>
      <li><a href="#">Eph&eacute;m&eacute;ride</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Services de sant&eacute;</a>
        <ul>
          <li><a href="#">Pharmacies de garde</a></li>
          </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Transports</a>
        <ul>
<li><a href="#">Covoiturage</a></li>
<li><a href="#">Horaires bus</a></li>
<li><a href="#">Horaires SNCF</a></li>
<li><a href="#">Vers les &icirc;les</a></li>
        </ul>
      </li>
</ul>
  </li>
</ul></td></tr>
              <tr> 
                <td width="210" height="500" valign="top"><p class="menugauche">&nbsp;</p>
                 
                                    <p class="menugauche">&nbsp;</p></td>
              </tr>
            </table></td>
          <td width="620" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr> 
                <td width="620" height="300" valign="top"><h1 class="titre">&nbsp;</h1>
                <h2 class="soustitre">&nbsp;</h2>
</div><table>
  <tr>
    <td class="liste"><a></a></td>
  </tr>
</table>
</td>
              </tr>
            </table></td>
          <td width="170" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr> 
                <td width="170" height="300" valign="top" bgcolor="#A0B8D4"> 
                  
                <p class="menudroite">&nbsp;</p></td>
              </tr>
          </table></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td height="36" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr> 
          <td width="1000" height="19" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
              <!--DWLayoutTable-->
              <tr> 
                <td width="1000" height="19" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr> 
          <td height="19" valign="top">
		   <div  align="center" class="arial9"> 
        <script language="JavaScript">
today=new Date();
y0=today.getFullYear();
</script>
        © <a
href="http://www.crozon-bretagne.com" class="arial9">crozon-bretagne.com</a> 
        <script language="JavaScript">
today=new Date();
y0=today.getFullYear();
</script>
        <script language="JavaScript">
document.write(y0);
</script></div>
		  </td>
        </tr>
      </table></td>
  </tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuAnnee", 
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

et puis celui de la feuille css générale :

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
.fonbody {
	background-color: #FFF;
	background-image: url(images/fond.png);
	background-repeat: repeat-x;

}
.foncontainer {
	background-color: #FFFFFF;
	border: 1px solid #33CCFF;
}
.bordure {
	border: 1px solid #00CCFF;
}
.horizon {
	background-image: url(images/goulien01m.jpg);
}
.slogan {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #999;
	text-align: center;
	margin: 0px;
	padding: 0px;
	line-height: 19px;
}
.menuhorizontal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-decoration: none;
	border: 2px solid #336699;
	background-image: url(images/moule.jpg);
	line-height: 15px;
	padding-bottom: 2px;
	padding-top: 2px;
	padding-right: 6px;
	padding-left: 6px;

}
.menuhorizontal:hover {
	color: #000033;
	background-image: url(images/sable.jpg);
	border: 2px solid #FFFFFF;
}
.titre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(images/moule.jpg);
	display: block;
	margin: 0px;
	padding: 5px;
	text-align: center;
	border: 2px solid #009999;

}
a.titre  {color:#FFF}

.texte {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #003333;
	text-decoration: none;
	text-align: justify;
	margin: 0px;
	padding: 10px;
}
.liste {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	padding-left: 25px;
	padding-right: 25px;
}

.soustitre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #003366;
	text-align: center;
	margin: 0px;
	padding: 10px;
	letter-spacing: 2px;
}
.menugauche {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #006699;
	text-decoration: none;
	border: 1px dotted #000033;
	margin: 5px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.menugauche:hover {
	background-image: url(images/moule.jpg);
}

.arial9 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #0066FF;
	text-decoration: none;
}
.sousmenuhorizontal {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px 20px;
	margin-top: 0px;
	margin-right: 40px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.sousmenuhorizontal:hover {
	background-image: url(images/moule.jpg);
}
.menudroite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #369;
	text-decoration: none;
	background-color: #FFFFFF;
	display: block;
	margin: 0px;
	padding: 3px;
	border-top: 1px solid #0033FF;
	border-right: 1px none #0033FF;
	border-bottom: 1px solid #0033FF;
	border-left: 1px none #0033FF;

}
.menudroite:hover {
	color: #369;
}
.texteann {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	color: #000;
	margin: 10px;
}
.carac {
	width: 500px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #333;
	display: block;
}
.voir {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #F09;
	text-align: right;
	margin-right: 40px;
}

14/10/2009, 09h43
evevev

Après plein d'essais divers, je suis venue à ce que j'aurai dû faire depuis longtemps : des essais dans une page vierge avec un menu spry vierge...

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 (regarde l'ascenseur horizontal...)

Pourquoi ça fait ça ??? 8O
14/10/2009, 15h18
evevev

Un certain Thoams (forum css) a trouvé la solution :

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 :
ul.MenuBarVertical ul{
margin: -5% 0 0 95%;
(...)
}Je ferais plutôt ceci :

Code :
ul.MenuBarVertical ul{
margin-left: 8em;
(...)
}

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...
27/08/2010, 18h53
evevev

c'est