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

Re: [ydn-javascript] Zoom out and Menu IE7

Expand Messages
  • Todd Kloots
    Kaye - This issue is addressed in the Known Issues section of the Menu landing page under the item labeled Menu doesn t work correctly in IE 7 when the page
    Message 1 of 2 , Dec 9, 2008
    • 0 Attachment
      Kaye - 

      This issue is addressed in the "Known Issues" section of the Menu landing page under the item labeled "Menu doesn't work correctly in IE 7 when the page is zoomed."  


      - Todd

      On Dec 7, 2008, at 9:31 PM, ng.kaye wrote:

      Hi,

      Just noticed that using the test page shown below that the sub menu
      disappears when the page is zoomed out once.

      To reproduce:

      1. Load test page shown below
      2. Hit Ctrl- (zoom should now be set to 90% on right hand bottom corner)
      3. Mouse over menu - note that there is now a gap between the menu bar
      and the submenu
      4. When you mouse over the gap, the sub menu disappears.

      Does anyone have any ideas on why this occurs and if there is a
      workaround for this? I know that zooming in IE7 doesn't work properly.
      I've put the zoom menu hack in already in the test page.

      Thanks for your help.

      Cheers,
      Kaye.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ /EN"
      "http://www.w3. org/TR/html4/ loose.dtd">
      <html>
      <head>
      <title>Test Menu Page</title>
      <link rel="stylesheet" type="text/css"
      href="http://pdkyn. om.net/Transact_ Online/3rdParty/ yui/2.6.0/ build/menu/ assets/menu. css">
      <link rel="stylesheet" type="text/css"
      href="http://pdkyn. om.net/Transact_ Online/3rdParty/ yui/2.6.0/ build/container/ assets/container .css">
      <style type="text/css" >
      body {
      padding: 0;
      margin: 0;
      }

      #top {
      padding: 0;
      margin: 0;
      top: 0px;
      left: 0px;
      width: 110%;
      height: 39px;
      z-index: 10;
      }
      </style>
      <!--[if lte IE 7]>
      <style type="text/css" >
      #topContent {display: inline-block; }
      </style>
      <![endif]-->
      <!--[if lt IE 7]>
      <style type="text/css" >
      html {overflow: hidden;}
      body {overflow: hidden; width: 100%; height: 100%;}
      #top {position: absolute;}
      </style>
      <![endif]-->
      </head>
      <body style="display: block;">
      <div style="overflow: visible; height: 53px;" id="top"
      onmouseover= "document. getElementById( 'top').style. overflow = 'visible';">
      <div id="topContent" >
      <div id="navigation" >
      <div id="basicMenu" >
      <div id="productsandserv ices" class="yuimenubar
      yuimenubarnav" >
      <div class="bd">
      <ul class="first- of-type">
      <li class="yuimenubarit em first-of-type" >
      <a class="yuimenubarit emlabel"
      href="#">Communicat ion</a>
      <div id="communication"
      class="yuimenu" >
      <div class="bd">
      <ul>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel" href="http://360.yahoo. com">360&#176;< /a>
      </li>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel" href="http://alerts. yahoo.com">Alerts</a>
      </li>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel" href="http://avatars. yahoo.com">Avatars</a>
      </li>
      </ul>
      </div>
      </div>
      </li>
      <li class="yuimenubarit em">
      <a class="yuimenubarit emlabel"
      href="#">Shopping< /a>
      <div id="shopping" class="yuimenu" >
      <div class="bd">
      <ul>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel"
      href="http://auctions. shopping. yahoo.com">Auctions</ a>
      </li>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel" href="http://autos. yahoo.com">Autos</a>
      </li>
      <li class="yuimenuitem" >
      <a
      class="yuimenuiteml abel"
      href="http://classifieds. yahoo.com">Classifieds< /a>
      </li>
      </ul>
      </div>
      </div>
      </li>
      </ul>
      </div>
      </div>
      </div>
      </div>
      </div>
      <script type="text/javascri pt"
      src="http://pdkyn. om.net/Transact_ Online/3rdParty/ yui/2.6.0/ build/utilities/ utilities. js">
      </script>
      <script type="text/javascri pt"
      src="http://pdkyn. om.net/Transact_ Online/3rdParty/ yui/2.6.0/ build/container/ container- min.js">
      </script>
      <script type="text/javascri pt"
      src="http://pdkyn. om.net/Transact_ Online/3rdParty/ yui/2.6.0/ build/menu/ menu.js">
      </script>
      <script type="text/javascri pt">
      var oMenuBar = new
      YAHOO.widget. MenuBar(" productsandservi ces", {

      autosubmenudisplay: true,
      hidedelay: 750,
      lazyload: true,
      clicktohide: true

      });

      oMenuBar.subscribe( 'click', function (p_sType, p_sArgs) {
      var o = p_sArgs[1].cfg. getProperty( "submenu" );
      if(o && !o.cfg.getProperty( "visible" )) {
      o.show();
      }
      });

      oMenuBar.render( );
      oMenuBar.subscribe( "show", function () {

      if (YAHOO.env.ua. ie === 7 && this.parent) {
      this.align() ;
      this.align() ;
      }

      });


      oMenuBar.show( );
      </script>
      </body>
      </html>


    Your message has been successfully submitted and would be delivered to recipients shortly.