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
      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
        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.