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

MenuBar causes paget to get chopped off in IE6

Expand Messages
  • foti-1@comcast.net
    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
    Message 1 of 2 , Feb 29, 2008
    • 0 Attachment
      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>
    • Jing Ceawlin
      This one is called IE/Win Guillotine Bug, you can find more detail here http://www.positioniseverything.net/explorer/guillotine.html You can add an empty div
      Message 2 of 2 , Mar 1, 2008
      • 0 Attachment
        This one is called IE/Win Guillotine Bug, you can find more detail here http://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.