Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Left Hand Menu: OK in FF2, Not so in IE7

Expand Messages
  • István Vincze
    Point 2 is solved, too... it was once again a position:relative , this time in the class for the div that contains the menu.
    Message 1 of 3 , Feb 2, 2007
    • 0 Attachment
      Point 2 is solved, too... it was once again a "position:relative", this time
      in the class for the div that contains the menu.


      On Friday 02 February 2007 15:30, István Vincze wrote:
      > Hello,
      >
      > Well, I have to resort to seeking some assistance.
      >
      > I have utilised a left hand YUI menu (with submenus) on a site - using
      > markup - which displays and works fine as I have configured it under
      > Firefox 2 (on Linux), but it does not behave the same way in IE7 (on WinXP,
      > running in VMWare).
      >
      > I have reverted back to using the default menu.css provided by YUI -
      > instead of my customised version of it, but makes no difference.
      >
      > 1.) When I mouse-over the items the submenus only appear if the pointer is
      > directly over the text or the arrow image, otherwise the menu item doesn't
      > even highlight. (The 'a' tag's area is not extending beyond the text it's
      > surrounding).
      > HOWEVER, if I use 'fixedcenter:true, visible:true' instead
      > of 'position:"static"' everything works fine in both browsers, but point 2.
      > (below) still remains.
      >
      > 2.) When the submenus do show up, they display behind other elements (divs)
      > to the right of the menu.
      >
      > Any ideas or some guidance would be most appreciated.
      >
      > Thanks,
      > Istvan
      >
      >
      >
      >
      > // === JS Code ===========================================================
      >
      >
      > <script type="text/javascript">
      >
      > YAHOO.widget.MenuItem.prototype.IMG_ROOT = "/lib/yui/build/menu/assets/";
      > YAHOO.widget.MenuItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH
      > = "menuarorght8_hov_1.gif";
      > YAHOO.widget.MenuItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH
      > = "menuarorght8_hov_1.gif";
      > YAHOO.widget.MenuItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH
      > = "menuarorght8_dim_1.gif";
      > YAHOO.widget.MenuItem.prototype.CHECKED_SUBMENU_INDICATOR_IMAGE_PATH
      > = "menuchk8_hov_1.gif";
      >
      > // Initiate and load the products menu.
      > YAHOO.example.onMenuReady = function(p_oEvent) {
      > var oMenu = new YAHOO.widget.Menu("mainproductsmenu", {
      > position:"static", showdelay:250, hidedelay:750, lazyload:true });
      > oMenu.render();
      > }
      >
      > // Initialize and render the menu bar when it is available
      > YAHOO.util.Event.onContentReady("mainproductsmenu",
      > YAHOO.example.onMenuReady);
      >
      > </script>
      >
      >
      >
      > // === PHP Generated HTML Code
      > ==============================================
      >
      >
      > <div id="mainproductsmenu" class="yuimenu">
      > <div class="bd">
      >
      > <ul class="first-of-type">
      >
      > <li class="yuimenuitem first-of-type"><a
      > href="/index.php?ct=Blushes&main_cat_id=49">Blushes</a>
      > <div id="sm_0" class="yuimenu">
      > <div class="bd">
      > <ul class="first-of-type">
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Powder
      > Blush&sub_cat_id=86">Powder Blush</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a
      > href="/index.php?ct=Brows&main_cat_id=52">Brows</a>
      > <div id="sm_1" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Brow Defining
      > Pencil&sub_cat_id=102">Brow Defining Pencil</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a href="/index.php?ct=Corrective
      > Make-Up&main_cat_id=47">Corrective Make-Up</a>
      > <div id="sm_2" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Cover Perfect
      > Corrector&sub_cat_id=90">Cover Perfect Corrector</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Oil Absorbing
      > Powder&sub_cat_id=87">Oil Absorbing Powder</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem selected"><a
      > href="/index.php?ct=Eyes&main_cat_id=51">Eyes</a>
      > <div id="sm_4" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Creative Eye Color
      > System&sub_cat_id=98">Creative Eye Color System</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Eye Defining
      > Pencil&sub_cat_id=99">Eye Defining Pencil</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Eye
      > Definition&sub_cat_id=101">Eye Definition</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Eye
      > Shadow&sub_cat_id=88">Eye Shadow</a></li>
      > <li class="yuimenuitem"><a
      > href="/category_list.php?ct=Mascara&sub_cat_id=100">Mascara</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a
      > href="/index.php?ct=Foundations&main_cat_id=46">Foundations</a>
      > <div id="sm_9" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Crème Powder
      > Foundation&sub_cat_id=89">Crème Powder Foundation</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Liquid
      > Foundation&sub_cat_id=85">Liquid Foundation</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a
      > href="/index.php?ct=Lips&main_cat_id=50">Lips</a> <div id="sm_11"
      > class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Creative Lip Color
      > System&sub_cat_id=95">Creative Lip Color System</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Lip
      > Lustre&sub_cat_id=96">Lip Lustre</a></li>
      > <li class="yuimenuitem"><a
      > href="/category_list.php?ct=Lipstick&sub_cat_id=94">Lipstick</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a
      > href="/index.php?ct=Powders&main_cat_id=48">Powders</a>
      > <div id="sm_14" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Compact
      > Powder&sub_cat_id=92">Compact Powder</a></li>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Pressed Shimmer
      > Compact Powder&sub_cat_id=93">Pressed Shimmer Compact Powder</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > <li class="yuimenuitem "><a href="/index.php?ct=Tools &
      > Accessories&main_cat_id=53">Tools & Accessories</a>
      > <div id="sm_16" class="yuimenu">
      > <div class="bd">
      > <ul>
      > <li class="yuimenuitem"><a href="/category_list.php?ct=Brush
      > Set&sub_cat_id=103">Brush Set</a></li>
      > </ul>
      > </div>
      > </div>
      > </li>
      >
      > </ul>
      >
      > </div>
      > </div>
    Your message has been successfully submitted and would be delivered to recipients shortly.