Menu css : bugs selon navigateurs

**Evannnne** · 26/11/2008, 15h30

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

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

**devyan** · 26/11/2008, 17h27

Il me semble tout à fait normal que tu n'ai pas le même rendu avec IE car tu as du code spécifique...

<!--[if lte IE 6]>

**Evannnne** · 26/11/2008, 17h36

oui il est spécifique pour que ça ne bugge pas sous IE, mais que faut-i faire pour FF? Si j'enlève ce code spécifique IE, ça marchera sous FF et pas IE...

**devyan** · 26/11/2008, 18h04

J'ai un gros problème avec ceci :

<a class="down" href="#url">SCANSCOT</a>
</a>

Il y a des imbrications de balises html

et même apparemment une double fermeture de balise A

Peut-être que le problème provient de là ...

: Est-ce que tu as toujours la version avant modifications pour le fonctionnement avec IE ?
Si OUI, est-ce que cela fonctionne avec FF et/ou Opera avec cette ancienne version ?

**Evannnne** · 26/11/2008, 18h20

J'ai copié ...le code du menu à l'adresse ci dessous.

http://www.cssplay.co.uk/menus/pro_dropline7.html

Quand tu vois le code source, il a mis ces "lte" pour que ça ne bugge pas avec IE, et son menu marche bien avec FF aussi...

Menu css : bugs selon navigateurs

CSS

Vue hybride

Discussions similaires

Partager

Partager