Menu css : bugs selon navigateurs
Bonjour,
J'ai un menu en CSS qui ne présente pas de la même manière selon les navigateurs; j'y ai mis tout mon savoir...qui est limité, et j'aimerais savoir vous pourriez me dépanner;
il marche bien sous IE, mais
- sur Firefox, le sous menu horizontal ne va pas jusqu'à droite complètement, et il tressaute sur l'avant dernier lien à droite.
- sur Opéra, il me fait des carrés pour le sous menu horizontal...
ci-joint le code:
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
| <!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> menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#menu {
position:relative;
font-size:12px;
height:35px;
background: url(fdht.gif);
}
#menu, #menu ul {
padding:0;
margin:0;
list-style:none;
max-width:757px;
}
#menu table {border-collapse:collapse; margin:-1px -10px; 0 0; padding:0; width:0; height:0; font-size:12px;}
#menu li {
float:left;
height:38px;
margin-right:18px;
}
#menu li a {float:left; display:block; height:38px; line-height:38px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:11px; color:#fff; text-decoration:none; font-weight:bold;}
#menu li a.down {background:url() no-repeat right center;}
#menu li ul li a.down {
font-size:15px;
color:#6699FF;
font-weight:normal;
}
#menu li a:hover {white-space:nowrap; color:#444;}
#menu li a.down:hover {white-space:nowrap; color:#444;}
#menu li:hover > a {color:#444;}
#menu li:hover > a.down {color:#444;}
#menu li ul {position:absolute; top:38px; left:-9999px; z-index:10;}
#menu li ul.floatRight li {float:right;}
#menu :hover ul,
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul :hover ul :hover ul {
left:0;
background-color: #BDDAEA;
}
#menu :hover ul ul,
#menu:hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul ul,
#menu :hover ul :hover ul :hover ul :hover ul ul {left:-9999px; top:38px; background:transparent;}
</style>
</head>
<body>
<div align="right">
<table width="760" border="2" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr align="center" valign="top">
<td><div align="center">
<table width="760" align="center" cellpadding="0" cellspacing="3" valign="top">
<tr>
<td valign="top"><table width="757" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<ul id="menu">
<li><a href="#url"></a></li>
<li><a href="#url">NEWS</a></li>
<li><a class="down" href="#url">SCANSCOT<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--></a>
<ul>
<li> <a class="down" href="#url"></a><a href="#url"></a></li>
<li><a href="#url">HISTORIC</a></li>
<li><a href="#url">FLEET</a></li>
<li><a href="#url">GALLERY</a></li>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="down" href="#url">ROLLDOCK<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--> </a>
<ul>
<li><a class="down" href="#url"></a><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url">HISTORIC</a></li>
<li><a href="#url">GALLERY</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="down" href="#url">RORO LOLO FLOFLO<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--></a>
<ul>
<li><a class="down" href="#url"></a><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url"></a></li>
<li><a href="#url">GALLERY</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="down" href="#url">OTHERS ACTIVITIES<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--></a>
<ul class="floatRight">
<li><a class="down" href="#url"></a><a href="#url">GENERAL CARGO/BULK</a></li>
<li><a href="#url">YACHT TRANSPORTATION</a></li>
<li><a href="#url">TUGS AND BARGES</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="down" href="#url">CONTACT</a></li>
</ul></td>
</tr>
<tr>
</tr>
</table> </td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
</body>
</html> |
je ne sais pas ce qu'il faut rajouter pour enlever ces bugs.
merci de votre aide:D
