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

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

Expand Messages
  • Peter Foti
    I suspected it might be the Guillotine bug, but I was surprised to see that the YUI code didn t account for this already. I m not missing something obvious,
    Message 1 of 5 , Mar 3 5:46 AM
      
      I suspected it might be the Guillotine bug, but I was surprised to see that the YUI code didn't account for this already.  I'm not missing something obvious, right?
       
      Peter
       
      ----- Original Message -----
      Sent: Saturday, March 01, 2008 8:11 PM
      Subject: Re: [ydn-javascript] MenuBar causes paget to get chopped off in IE6

      This one is called IE/Win Guillotine Bug, you can find more detail here http://www.position iseverything. 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@comcast. net> 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.yahooapi s.com/2.5. 0/build/reset- fonts-grids/ reset-fonts- grids.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapi s.com/2.5. 0/build/base/ base-min. css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapi s.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.yahooapi s.com/2.5. 0/build/yahoo- dom-event/ yahoo-dom- event.js"></script>
      <script type="text/javascript" src="http://yui.yahooapi s.com/2.5. 0/build/containe r/container_ core-min. js"></script>
      <script type="text/javascript" src="http://yui.yahooapi s.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>


    • foti-1@comcast.net
      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
      Message 2 of 5 , Mar 3 10:19 AM
        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 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>
      • Peter Foti
        Anyone? ... From: Peter Foti To: ydn-javascript@yahoogroups.com Sent: Monday, March 03, 2008 8:46 AM Subject: Re: [ydn-javascript] MenuBar causes page to get
        Message 3 of 5 , Mar 4 5:22 AM
          
          Anyone? 
           
          ----- Original Message -----
          Sent: Monday, March 03, 2008 8:46 AM
          Subject: Re: [ydn-javascript] MenuBar causes page to get chopped off in IE6

          

          I suspected it might be the Guillotine bug, but I was surprised to see that the YUI code didn't account for this already.  I'm not missing something obvious, right?
           
          Peter
           
          ----- Original Message -----
          Sent: Saturday, March 01, 2008 8:11 PM
          Subject: Re: [ydn-javascript] MenuBar causes paget to get chopped off in IE6

          This one is called IE/Win Guillotine Bug, you can find more detail here http://www.position iseverything. 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@comcast. net> 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.yahooapi s.com/2.5. 0/build/reset- fonts-grids/ reset-fonts- grids.css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapi s.com/2.5. 0/build/base/ base-min. css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapi s.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="yuimenubarit em first-of-type">
          <a class="yuimenubarit emlabel" href="#">Foo</a>
          </li>
          <li class="yuimenubarit em">
          <a class="yuimenubarit emlabel" 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/javascri pt" src="http://yui.yahooapi s.com/2.5. 0/build/yahoo- dom-event/ yahoo-dom- event.js"></script>
          <script type="text/javascri pt" src="http://yui.yahooapi s.com/2.5. 0/build/containe r/container_ core-min. js"></script>
          <script type="text/javascri pt" src="http://yui.yahooapi s.com/2.5. 0/build/menu/ menu-min. js"></script>
          <script type="text/javascri pt">
          YAHOO.util.Event. onDOMReady( function () {
          var oMenuBar = new YAHOO.widget. MenuBar("mymenubar" );
          oMenuBar.render( );
          });
          </script>

          </body>
          </html>


        • Jing Ceawlin
          Peter, YUI accounts for differences among all A-grade browsers. But it doesn t mean that you don t need to solve any browser bugs when you use YUI. There s no
          Message 4 of 5 , Mar 4 5:51 AM
            Peter,
            YUI accounts for differences among all A-grade browsers. But it doesn't mean that you don't need to solve any browser bugs when you use YUI. There's no perfect js library right now, maybe never. And there's a great chance that you did nothing wrong ( I'm not sure). It's just the nature of web developement -- dealing with browser bugs :)

            Regards,
            Jing


            On Tue, Mar 4, 2008 at 9:22 PM, Peter Foti <foti-1@...> wrote:

            

            Anyone? 
             
            ----- Original Message -----
            From: Peter Foti
            Sent: Monday, March 03, 2008 8:46 AM
            Subject: Re: [ydn-javascript] MenuBar causes page to get chopped off in IE6

            

            I suspected it might be the Guillotine bug, but I was surprised to see that the YUI code didn't account for this already.  I'm not missing something obvious, right?
             
            Peter
             
            ----- Original Message -----
            Sent: Saturday, March 01, 2008 8:11 PM
            Subject: Re: [ydn-javascript] MenuBar causes paget to get chopped off in IE6

            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>



          • 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 5 of 5 , Jun 2, 2009
              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.