2009-02-24 15 views
0

Le YUI MenuBar semble avoir un problème avec être en-dessous d'un en-tête.En-tête au-dessus d'un MenuBar YUI, sans problème de défilement?

HTML:

<body class="yui-skin-sam"> 
    <a id="headerStyle"><img href="/" src="/images/Header.jpg" alt="Home"/></a> 
    <div id="menuPanel" style="padding:1px"> 

CSS:

#headerStyle { 
    position:relative; 
    width:600px; 
    height:100px; 
} 

Javascript:

var oMenu = new YAHOO.widget.MenuBar("mymenu"); 
oMenu.addItems([ 
    { 
     text: "Main", 
     submenu: { 
      id: "menu1", 
      itemdata: [ 
       { text: "1" }, 
       { text: "2" }, 
       { text: "3" }, 
       { text: "4" }, 
       { text: "5" }, 
       { text: "6" }, 
       { text: "7" }, 
       { text: "8" } 
    ] 
     } 
    } 
]); 
oMenu.render($("#menuPanel").get(0)); 
oMenu.show(); 

Cliquer MenuBar pour la première fois, il affiche seulement 3 éléments avec défilement. Le problème disparaît après le premier clic.

Des idées?

+0

Ce code n'est pas suffisant pour reproduire vos problèmes. Sur FireFox, je ne peux pas faire apparaître la barre de défilement lorsque je l'attache à #menuPanel, même après une image. Un exemple de page de votre code serait préférable de voir ce qui se passe. –

+0

Hmm, je l'ai réparé. Définir la hauteur dans l'en-tête css semble causer le problème. Désolé je ne peux pas facilement poster un exemple de page. Merci de votre aide. –

Répondre

0

La spécification de la propriété height dans le fichier CSS semble provoquer ce problème. Le simple retrait le fait fonctionner comme il se doit.