Comment empêcher un menu CSS de chevaucher un tableau?

Bonjour à tous,

Je vous soumets un problème de chevauchement sous IE7 que je n’arrive pas à résoudre. J’ai déjà reçu beaucoup d’aide afin de mettre en ligne un site perso sur la Varappe.
Sous FF3 tout est parfait et sous IE6 c’est bon.

Lorsque la page, un menu vertical CSS et un tableau, s’affiche avec IE7 le menu, chevauche le tableau et ne se trouve pas à la gauche de ce même tableau comme ce code le précise
#tab1 { margin-left:225px; }

Il n’y a pas d’erreur dans les codes afin de forcer le menu à gauche.

Voici les codes :

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
body { margin:0; padding:0; }
 
#tab1 { margin-left:225px; }
 
#menu {
width:225px; /*100px*/
text-align:center; /*center*/
position:fixed; /*le menu ne bouge pas */
left:0; top:0;
float:left; }
 
.box { position:relative; /*relative*/ }
#menu a, #menu a:visited { /*configuration des blocks menu*/
/*text-decoration:none;*/
background-color:#E8312D;
color:#FFFFFF; /*ffff*/
display:block;
width:200px; /*88px*/
height:28px; /*16px*/
font-weight: bold; /*test gras*/
font-size:16px; /*14px*/
border:0px solid #fff; /*1px solid #fff (espacement vertical entre les blocks)*/
padding: 12px; /*5px*/ }
* html #menu a, * html #menu a:visited {
width: 225px; /*200px*/
 
height:28px; /*28px*/
width:88px; /*88px*/
height:28px; /*16px*/ }
#menu a span { display:none; }
#menu a:hover { /*encadrement des block au survol*/
border:1px solid #ccc; /*000*/ }
#menu a:hover span.left, /* boutons de'encarement de texte*/
#menu a:hover span.right { /* boutons de'encarement de texte*/
display:block; /*block*/
position:absolute; /*absolute*/
height:0; /*0*/
width:0; /*0*/
/*overflow:hidden; /*hidden*/
border-top:8px solid #fff; /*#fff */
border-bottom:8px solid #fff; /*#fff */ }
#menu a:hover span.left { /* espacement horizontal de la gauche desboutons d'encarement du texte*/
left:13px; /*5px*/
top:15px; /*5px*/
border-left:8px solid #c00; }
#menu a:hover span.right { /* espacement horizontal de la droite des boutons d'encarement du texte*/
left:210px; /*87px*/
top:15px; /*5px*/
border-right:8px solid #c00; }
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px; /*8px*/
height:20px; /*16px*/
width:0; /*0px*/
h\eight:0; /*opx*/
}
#menu a:hover span.lk { /*définition des blocks explication*/
display:block;
position:absolute;
left:225px; /*120px*/
top:0; /*0px*/
padding:10px; /* 5px*/
width:250px; /*100px*/
background-color:#CCFFFF; /*définition couleur de fond blocks explication*/
/*background-color:#fff; /*fff*/
color:#000; /*000*/
border:1px solid #E8312D; /*1px solid #234*/
}

et voici le code HTML :

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
<!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>ma page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="menu.css" /> 
</head>
 
 
<body>
 	<div id="menu">
		<div class="box">
			<a href="#nogo">Ma page
				<span class="left"></span><span class="right"></span><span class="lk"></span>
			</a>
		</div>
		<div class="box">
			<a href="#nogo">Nous connaître
				<span class="left"></span><span class="right"></span><span class="lk"></span>    
			</a>  
		</div>
		<div class="box">
			<a href="#nogo">Ton itinéraire
				<span class="left"></span><span class="right"></span><span class="lk"></span>   
			</a>  
		</div>
		<div class="box">
			<a href="#nogo">Equipements<span class="lk"></span></a>  
		</div>
		<div class="box">
		    <a href="#nogo">Difficultés
		      <span class="left"></span><span class="right"></span><span class="lk"></span>
			</a>  
		</div>
		<div class="box">
			<a href="#nogo">Précautions<span class="lk"></span></a>  
		</div>
	    <div class="box">
		    <a href="#nogo">Terrains
		      <span class="left"></span><span class="right"></span><span class="lk"></span>    
			  <span style="font-family:Wingdings; font-size:14.0pt; color:black; "></span> 
			</a>  
		</div>
	    <div class="box">
			<a href="#nogo">
				<span class="left"></span><span class="right"></span><span class="lk"></span>    
			</a>  
		</div>
	    <div class="box">
			<a href="#nogo">Notre service de conseils</a>  
		</div>
		<div class="box">
			<a href="#nogo">Nous contacter
				<span class="left"></span><span class="right"></span><span class="lk"></span>    
			</a> 
		</div>
		<div class="box">
		    <a href="#nogo">Item 11
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 11</span>
			</a>  
		</div>
		<div class="box">
		    <a href="#nogo">Item 12
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 12</span>
			</a> 
		</div>
		<div class="box">
		    <a href="#nogo">Item 13
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 13</span>
			</a>
		</div>
		<div class="box">
		    <a href="#nogo">Item 14
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 14</span>
			</a>  
		</div>
		<div class="box">
		    <a href="#nogo">Item 15
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 15</span>
			</a>  
		</div>
		<div class="box">
		    <a href="#nogo">Item 16
		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 16</span>
			</a> 
		</div>
	</div>
 
	<div id="tab1">
 
		<table width="775"height="44" border="1" cellpadding="1" cellspacing="0" bordercolorlight="#996600" bordercolordark="#3333FF" bgcolor="#CCFFFF">
		<tr>
		<td width="100%" align="center" height="35"><div align="center"><b><font color="#ff3333" face="Georgia, Times New Roman, Times, serif" size="3">Les pistes, les  équipements et les conseils nécessaires à l'escalade de haut niveau.</font></b></div></td>
		</tr>
		</table>
		<table width="775"height="773" border="1" cellspacing="1" cellpadding="0" bordercolorlight="#FFFFFF" bordercolordark="#666600">
		<tr bgcolor="#66FFFF">
		<td width="156" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF" size="+1">Montagne</font></span></div></td>
		<td width="64" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF" size="+1">itinér.</font></span></div></td>
		<td width="396" height="65" align="center"><blockquote class="Style36"><blockquote>
		<div align="center"><font color="#0000FF" size="+1">Descriptif</font></div>
		</blockquote>
		</blockquote></td>
		<td width="81" height="65"><div align="center" class="Style36"><font color="#0000FF" size="+1">cote</font></div></td>
		<td width="139" height="65" align="center"><p align="center" class="Style36"><font color="#0000FF" size="+1">dénivelé</font></p>        </td>
		<td width="129" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF">R&eacute;f.</font></span></div></td>
		</tr>
		<tr bgcolor="#00FFFF">
		<td 
		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td 
		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td 
		height="35" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		</tr>
		<tr bgcolor="#00FFFF">
		<td 
		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td 
		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td 
		height="35" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		</tr>
		<tr bgcolor="#00FFFF">
		<td height="37" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td 
		height="37" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
		</tr>
		</table>
	</div>
 
</body>
</html>

Je pense que ce type de souci est récurrent sous IE7, mais…Pourriez-vous m’aider à le résoudre?

Bonjour,

Je ne vois aucune différence entre FF2, FF3, ou IE7.

Tu peux être plus clair sur le problème que tu rencontres, j'avoue ne pas avoir bien compris cette phrase :

Citation:

Lorsque la page, un menu vertical CSS et un tableau, s’affiche avec IE7 le menu, chevauche le tableau et ne se trouve pas à la gauche de ce même tableau

8O

1 pièce(s) jointe(s)

Trés rapide ton intervention ;)

Voici en screenshot ce qui s'affiche sous IE7 (Vista).

Le menu chevauche le tableau et seulement avec IE7.

Merci de ton aide.

Sous IE7 (XP), la tableau s'affiche correctement.
Le problème est donc spécifique à Vista.

Essaie avec ça pour #tab1 :
Code:

1 2 3 4 #tab1 { position:absolute; left:225px; }

Avec un lien je pourrais jeter un oeil avec IE7 sous Vista ;)

Bonjour devyan,

Je n'ai pas de lien vers ma machine, mais le screenshot de mon précédent message est pris sous Vista et IE7.
Je l'ai mis pour imager ma demande d'aide

La proposition avec position:absolute ne fonctionne pas sous IE7 Vista ?

Tu as trouvé la solution tout fonctionne parfaitement sous IE7 avec l'ajout du code ci-dessous.
Code:

1 2 3 4 #tab1 { position:absolute; left:225px; }
[/QUOTE]

Merci encore :mrgreen: