Bug avec menu horizontal Alsa sous FF et surtout IE

Bonjour,


J'ai utilisé l'exemple de menu horizontal d'Alsacréations. J'ai fait la page avec un DOCTYPE "XHTML 1.0 Transitional" et j'ai donc utilisé un mise en page en tableaux mais alégé un peu quand même.

Le soucis c'est que le menu déroulant doit être plus grand que le bouton car le texte y est plus long. Sur FF pas de problème, sur IE il y a un décalage entre les boutons.
Autre soucis, que je mette le menu sous un "div" ou que je mette le menu directement dans la cellule du tableau, le menu déroulant repousse tout le reste du site vers le bas. Ce soucis là je l'ai autant sur FF que sur IE.

Illustration des deux problèmes :




Code CSS :

td#menu {
	position: relative ;
	height: 46px ;
	margin-left: 9px ;
	z-index: 100 ;
}

dl, dt, dd, ul, li {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

td#menu dl {
	float: left ;
	width: 100px ;
}

td#menu dt {
	cursor: pointer ;
	text-align: center ;
	font-weight: bold ;
	font-size: 0.9em ;
	color: #000130 ;
	background: #fff ;
}

td#menu dt a {
	color: #000130 ;
	text-decoration: none ;
	display: block ;
	height: 46px ;
	border: 0 none ;
	line-height: 46px ;
	background: url(img/menu_block.jpg) no-repeat 0 -46px ;
}

td#menu dt a:hover {
	color: #f0f0f0 ;
	background: #316899 url(img/menu_block.jpg) no-repeat 0 0 ;
}

td#menu dd {
	display: none ;
	border: 1px solid gray ;
	width: 130px;
}

td#menu li {
	font-size: 0.9em ;
	text-align: left ;
	background: #f6f6f6 ;
}

td#menu li a {
	text-indent: 5px ;
	color: #000130 ;
	text-decoration: none ;
	display: block ;
	height: 1.7em ;
	border: 0 none ;
	line-height: 1.7em ;
}

td#menu li a:hover {
	background: #316899 ;
	color: #f0f0f0 ;
}

Code de la cellule où se situe le menu :

    <td width="655" id="menu">
      <dl>
        <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('smenu1');"><a href="#">About us</a></dt>
        <dd id="smenu1">
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Management team</a></li>
            <li><a href="#">Partner</a></li>
            <li><a href="#">Our Network</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Jobs @ Tech-IP</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('smenu2');"><a href="#">Products</a></dt>
        <dd id="smenu2">
          <ul>
            <li><a href="#">Classical</a></li>
            <li><a href="#">Over IP</a></li>
            <li><a href="#">Prepaid Cards</a></li>
            <li><a href="#">Wholesale Price list</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('smenu3');"><a href="#">Services</a></dt>
        <dd id="smenu3">
          <ul>
            <li><a href="#">IT</a></li>
            <li><a href="#">Voice</a></li>
            <li><a href="#">Post-sales support</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('smenu4');"><a href="#">Residential</a></dt>
        <dd id="smenu4">
          <ul>
            <li><a href="#">Tech-IP Phone</a></li>
            <li><a href="#">CPS</a></li>
            <li><a href="#">Prepaid / Postpaid</a></li>
            <li><a href="#">Cards</a></li>
            <li><a href="#">Price List</a></li>
            <li><a href="#">Helpdesk</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('smenu5');"><a href="#">Enterprise/SMB</a></dt>
        <dd id="smenu5">
          <ul>
            <li><a href="#">IP Telephony</a></li>
            <li><a href="#">CPS</a></li>
            <li><a href="#">Postpaid</a></li>
            <li><a href="#">Tailored Project</a></li>
            <li><a href="#">Price List</a></li>
            <li><a href="#">Helpdesk</a></li>
          </ul>
        </dd>
      </dl>
      <dl>
        <dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('smenu6');"><a href="#">CallShop</a></dt>
        <dd id="smenu6">
          <ul>
            <li><a href="#">Classical</a></li>
            <li><a href="#">CallShop over IP</a></li>
            <li><a href="#">Billing System</a></li>
            <li><a href="#">LCR</a></li>
            <li><a href="#">Price List</a></li>
            <li><a href="#">Helpdesk</a></li>
          </ul>
        </dd>
      </dl></td>

Il faut impérativement que le menu s'affiche correctement sur IE car c'est le futur site d'une entreprise et que malheureusement la majorité des gens sont encore sur IE et c'est un point à ne pas négliger pour une entreprise.

La question est : existe-t-il une solution à ce problème ?


Merci d'avance pour votre aide précieuse
Modifié par Singer in Blue (27 Aug 2005 - 15:55)

Bonjour,

a écrit :

Autre soucis, que je mette le menu sous un "div" ou que je mette le menu directement dans la cellule du tableau, le menu déroulant repousse tout le reste du site vers le bas. Ce soucis là je l'ai autant sur FF que sur IE.

La réponse ici

Je cite :

a écrit :

Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.

Pour l'autre décalage je ne sais pas.

Singer in Blue a écrit :

Le soucis c'est que le menu déroulant doit être plus grand que le bouton car le texte y est plus long. Sur FF pas de problème, sur IE il y a un décalage entre les boutons.

Pour ma part, je vois deux solutions simples :
- augmenter la largeur de tes boutons ;
- imposer la largeur des dl (égale à celle des boutons) : est-ce gênant si certains liens du sous-menu sont affichés sur deux lignes ? ;

Sinon, avec un positionnement adéquat, il doit être possible de sortir les dl de tes cellules, ce qui te permettrait d'avoir des largeurs différentes pour les menus et sous-menus :

<div id="menu">
<table>
<... ici tu mets tes cellules, avec les boutons seulement, ou mieux, une liste  ... />
</table>
<dl id="smenu1">
<dt>...</dt>
<dd>...</dd>
</dl>
... etc ...
</div>

et dans ta feuille de style :

#menu {
position: relative ;
}

#menu td {
width: 100px ;
height: 30px ;
}

#menu #smenu1 {
position: absolute ;
left: 0 ;
top: 40px ;
}

#menu #smenu2 {
position: absolute ;
left: 100px ;
top :40px ;
}

Et ainsi de suite ... j'ai pas testé, c'est juste une idée comme ça

Bonne chance.

Le problème c'est que même sous un DIV dès que tu enfermes le menu dans une cellule de tableau, le tableau s'agrandit quand le menu se déroule.

D'avoir un menu sur deux lignes oui ça pose problème parce que le désir du client c'est d'en avoir qu'une et il me semble que ça le ferait un peu mieux aussi pr un site d'entreprise.

Et j'vais pas pouvoir augmenter la largeur de mes boutons car j'ai encore un petit menu à côté et que je n'ai pas l'espace nécessaire à ma disposition.

C'est un véritable casse-tête.

Je retiens tout de même ceci

a écrit :
Sinon, avec un positionnement adéquat, il doit être possible de sortir les dl de tes cellules, ce qui te permettrait d'avoir des largeurs différentes pour les menus et sous-menus

Merci à toi pour ta contribution

Un problème de réglé grâce à vous. Merci

Maintenant reste plus qu'à régler le problème du décalage des boutons du menu et alors j'ai un nouveau bug qui est apparu...


D'abord j'explique comment j'ai régler ça :

Mon CSS :

div#global {
	position: relative ;
	margin: 10px auto ;
	width: 765px ;
	text-align: left ;
}

div#header {
	position: absolute ;
	margin: 0 ;
	height: 50px ;
}

div#site {
	position: absolute ;
	z-index: 1 ;
	margin: 50px 0 0 0 ;
}

Donc, mis à part le problème du décalage des boutons qui est secondaire pour le moment, le nouveau problème qui est apparu c'est que le menu passe sous le header animé. En fait j'avais omis le header animé car il était encore en développement. Maintenant que je l'ai intégré à ma page voilà que le menu passe dessous. J'ai essayé deux solutions :
1- en enfermant l'anim Flash dans un DIV et en donnant comme propriété dans le CSS un z-index.
2- même astuce mais en mettant dans le CSS la propriété directement sur la balise <object>.

J'ai déjà lu quelque part des choses à propos de ce bug mais je n'arrive plus à tomber dessus. Je poursuis mes recherches mais si quelqu'un peut m'aider c'est pas de refus.