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

Re: [ydn-javascript] MenuBar causes page to get chopped off in IE6

Expand Messages
  • Todd Kloots
    Peter - This does in fact appear to be an instance of the IE Guillotine bug. Working around the problem is pretty simple: Use the zoom property to trigger
    Message 1 of 5 , Jun 2, 2009
    • 0 Attachment
      Peter -

      This does in fact appear to be an instance of the IE Guillotine bug.
      Working around the problem is pretty simple: Use the "zoom" property
      to trigger the "hasLayout" property on the MenuBar's root element, as
      illustrated in this example:

      http://www.yuiblog.com/sandbox/yui/v270/examples/menu/example-03.html

      Per your comment about the MenuBar using code that prevents the
      Guillotine bug: The Menu CSS could put some code in place to attempt
      to guard against this bug in IE 6, but that will only work so long as
      folks are using the CSS packaged with Menu. Folks who are using Menu
      are likely writing their own custom skin, in which case, their going
      to have to deal with this on their own anyway.

      I'll add this as a Known Issue on the Menu landing page to assist
      users in the future.

      - Todd

      On Mar 3, 2008, at 10:19 AM, foti-1@... wrote:

      > Below is a copy of a thread I started on Friday, but I've only
      > gotten this one reply to it. What I don't understand is why the YUI
      > code does not prevent against the IE Guillotine bug (if that's what
      > this is) from the example below. Shouldn't the MenuBar *NOT* utilize
      > code known to trigger IE bugs?
      > -Peter
      >
      > This one is called IE/Win Guillotine Bug, you can find more detail
      > herehttp://www.positioniseverything.net/explorer/guillotine.html
      > You can add an empty div into your page to fix it, like this:
      > ...........
      > <div class="yui-b">
      > <div>
      > <h3>Shrink to me!</h3>
      > </div>
      > </div>
      > <div style='clear:both'></div>
      > </div>
      > <div id="ft"><!-- footer --></div>
      > ...........
      >
      > Of course introducing an empty element is not a good idea. If you
      > find any cleaner solution, please let me know :)
      >
      > Regards,
      > Jing
      >
      > On Sat, Mar 1, 2008 at 6:36 AM, <foti-1@...> wrote:
      >
      > In the example below, when you hover over any of the menubar items,
      > the text in the nested grids gets chopped off!!! This is in IE6. Is
      > this a bug? Am I missing something obvious? (Note, does the same
      > thing with 2.4.1).
      >
      > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > "http://www.w3.org/TR/html4/strict.dtd">
      > <html>
      > <head>
      > <meta http-equiv="Content-Type" content="text/html; charset:utf-8">
      > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/reset-fonts-grids/reset-fonts-grids.css
      > ">
      > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/base/base-min.css
      > ">
      > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.0/build/menu/assets/skins/sam/menu.css
      > ">
      > <title></title>
      > </head>
      > <body class="yui-skin-sam">
      > <div id="doc4" class="yui-t3">
      > <div id="hd">
      > Why does menu break the page in IE6?
      > </div>
      > <div id="bd">
      >
      > <div id="mymenubar" class="yuimenubar">
      > <div class="bd">
      > <ul class="first-of-type">
      > <li class="yuimenubaritem first-of-type">
      > <a class="yuimenubaritemlabel" href="#">Foo</a>
      > </li>
      > <li class="yuimenubaritem">
      > <a class="yuimenubaritemlabel" href="#">Bar</a>
      > </li>
      > </ul>
      > </div>
      > </div>
      >
      > <div id="yui-main">
      > <div class="yui-b">
      > <div class="yui-g">
      > <div class="yui-u first">
      > <div>
      > <h3>Welcome!</h3>
      > <p>
      > Zippidee doo daa!
      > </p>
      > </div>
      > <div>
      > <h3>What's New?</h3>
      > <ul>
      > <li>Not much</li>
      > <li>A whole lotta nothing!</li>
      > <li>Everything</li>
      > </ul>
      > </div>
      > </div>
      > <div class="yui-u">
      > <div>
      > <h3>Prepare to be astounded</h3>
      > <div>
      > Get ready for a snippy surprise!
      > </div>
      > </div>
      > </div>
      > </div>
      > </div>
      > </div>
      > <div class="yui-b">
      > <div>
      > <h3>Shrink to me!</h3>
      > </div>
      > </div>
      > </div>
      > <div id="ft"><!-- footer --></div>
      > </div>
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js
      > "></script>
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/container/container_core-min.js
      > "></script>
      > <script type="text/javascript" src="http://yui.yahooapis.com/2.5.0/build/menu/menu-min.js
      > "></script>
      > <script type="text/javascript">
      > YAHOO.util.Event.onDOMReady(function () {
      > var oMenuBar = new YAHOO.widget.MenuBar("mymenubar");
      > oMenuBar.render();
      > });
      > </script>
      >
      > </body>
      > </html>
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.