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

Layout Manager (2.7) doesn't render on IE 6 and 7

Expand Messages
  • greglgerg
    Hi, here is a frustrating problem. I m using the layout manager to do a very basic layout, and the layout breaks for IE 6 & 7 (and 8 in compatibility mode).
    Message 1 of 4 , May 28 9:55 AM
    • 0 Attachment
      Hi, here is a frustrating problem. I'm using the layout manager to do a very basic layout, and the layout breaks for IE 6 & 7 (and 8 in compatibility mode). The HTML elements that I'm trying to pull into the layout manager are <td> which seems to be the trigger for this.

      I haven't had much luck searching for others with this issue...any help would be greatly appreciated.
      Tested and works:
      windows: FF 3, Safari 3.2.3, Opera 9x, IE 8 (NOT compat mode)
      mac: FF3, Safari.

      Breaks: IE 6 and IE 7 and IE 8 in compatibility mode.

      Here's basic code to recreate it:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

      <html>
      <head>
      <title>Full Page Layout - Breaks in IE 7 (6/8 not tested)</title>

      <link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
      <!-- Skin CSS files resize.css must load before layout.css -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/resize.css">
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/layout.css">
      <!-- Utility Dependencies -->
      <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
      <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
      <!-- Optional Animation Support-->
      <script src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
      <!-- Optional Resize Support -->
      <script src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>
      <!-- Source file for the Layout Manager -->
      <script src="http://yui.yahooapis.com/2.7.0/build/layout/layout-min.js"></script>

      </head>

      <body class=" yui-skin-sam">
      <div id="header"><p>Header from a div</p></div>
      <table>
      <tr><!-- the following <td> do not render into left, center,
      right in IE 6, 7. IE 8 works unless it's in
      'compatibility mode'
      Works fine on FF 3, Opera 9x, Google Chrome, Safari
      (win and mac)-->
      <td id="left-column">left column content in a td</td>
      <td id="center-column">middle column content in a td</td>
      <td id="right-column">right column content in a td</td>
      </tr>
      </table>
      <div id="footer">Footer from a div, no p tag.</div>
      <script>
      (function() {
      var Dom = YAHOO.util.Dom,
      Event = YAHOO.util.Event;

      Event.onDOMReady(function() {

      var layout = new YAHOO.widget.Layout({
      units: [
      { position: 'top', body: 'header', height: 90},
      { position: 'right', body: 'right-column', width: 150 },
      { position: 'left', body: 'left-column', width: 150 },
      { position: 'center', body: 'center-column' },
      { position: 'bottom', body: 'footer', height: 50 }
      ]
      });
      layout.render();
      });
      })();
      </script>
      </body>
      </html>
    • Dav Glass
      That is not a limitation in Layout Manager, you are trying to do something that will result in invalid HTML markup. Layout Manager needs to work on free
      Message 2 of 4 , May 28 10:10 AM
      • 0 Attachment
        That is not a limitation in Layout Manager, you are trying to do
        something that will result in invalid HTML markup.

        Layout Manager needs to work on free flowing independent elements.
        Usually DIV's. It will wrap each unit in order to position
        it and allow for the resize and scrolling.

        What you are telling it to do, is build markup like this:

        <table>
        <tr>
        <div><div><td></td></div></div>
        <div><div><td></td></div></div>
        <div><div><td></td></div></div>
        </tr>
        </table>

        Which is invalid markup and will not work. IE will definitely not work, FF and
        Safari may appear to work, but they will cause problems later.

        Your best bet, is to remove the TABLE and make the TD's into DIV's.

        Does that make sense?
        Dav

        On Thu, 28 May 2009, greglgerg wrote:

        > Hi, here is a frustrating problem. I'm using the layout manager to do a very basic layout, and the layout breaks for IE 6 & 7 (and 8 in compatibility mode). The HTML elements that I'm trying to pull into the layout manager are <td> which seems to be the trigger for this.
        >
        > I haven't had much luck searching for others with this issue...any help would be greatly appreciated.
        > Tested and works:
        > windows: FF 3, Safari 3.2.3, Opera 9x, IE 8 (NOT compat mode)
        > mac: FF3, Safari.
        >
        > Breaks: IE 6 and IE 7 and IE 8 in compatibility mode.
        >
        > Here's basic code to recreate it:
        >
        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd">
        >
        > <html>
        > <head>
        > <title>Full Page Layout - Breaks in IE 7 (6/8 not tested)</title>
        >
        > <link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
        > <!-- Skin CSS files resize.css must load before layout.css -->
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/resize.css">
        > <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/layout.css">
        > <!-- Utility Dependencies -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
        > <script src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
        > <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
        > <!-- Optional Animation Support-->
        > <script src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
        > <!-- Optional Resize Support -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>
        > <!-- Source file for the Layout Manager -->
        > <script src="http://yui.yahooapis.com/2.7.0/build/layout/layout-min.js"></script>
        >
        > </head>
        >
        > <body class=" yui-skin-sam">
        > <div id="header"><p>Header from a div</p></div>
        > <table>
        > <tr><!-- the following <td> do not render into left, center,
        > right in IE 6, 7. IE 8 works unless it's in
        > 'compatibility mode'
        > Works fine on FF 3, Opera 9x, Google Chrome, Safari
        > (win and mac)-->
        > <td id="left-column">left column content in a td</td>
        > <td id="center-column">middle column content in a td</td>
        > <td id="right-column">right column content in a td</td>
        > </tr>
        > </table>
        > <div id="footer">Footer from a div, no p tag.</div>
        > <script>
        > (function() {
        > var Dom = YAHOO.util.Dom,
        > Event = YAHOO.util.Event;
        >
        > Event.onDOMReady(function() {
        >
        > var layout = new YAHOO.widget.Layout({
        > units: [
        > { position: 'top', body: 'header', height: 90},
        > { position: 'right', body: 'right-column', width: 150 },
        > { position: 'left', body: 'left-column', width: 150 },
        > { position: 'center', body: 'center-column' },
        > { position: 'bottom', body: 'footer', height: 50 }
        > ]
        > });
        > layout.render();
        > });
        > })();
        > </script>
        > </body>
        > </html>
        >
        >

        --
        Dav Glass
        davglass@...
        blog.davglass.com


        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +
      • greglgerg
        Dav, thanks for the quick reply. I was afraid it d be something like that, but got thrown by it rendering in all of the other browsers. I was hoping against
        Message 3 of 4 , May 28 11:17 AM
        • 0 Attachment
          Dav, thanks for the quick reply.

          I was afraid it'd be something like that, but got thrown by it rendering in all of the other browsers. I was hoping against hope that when pulling an element into layout it also changed that element's type. I see now (via firebug) that I was incorrect in that hope.

          I'm attempting to put a facelift on a quite-involved site (It's a Moodle in case anybody is interested) that makes extensive use of tables for layout. I will play with using the YUI copy the content of the target <td>s to <div>s and delete the <table>.

          --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
          >
          >
          > That is not a limitation in Layout Manager, you are trying to do
          > something that will result in invalid HTML markup.
          >
          > Layout Manager needs to work on free flowing independent elements.
          > Usually DIV's. It will wrap each unit in order to position
          > it and allow for the resize and scrolling.
          >
          > What you are telling it to do, is build markup like this:
          >
          > <table>
          > <tr>
          > <div><div><td></td></div></div>
          > <div><div><td></td></div></div>
          > <div><div><td></td></div></div>
          > </tr>
          > </table>
          >
          > Which is invalid markup and will not work. IE will definitely not work, FF and
          > Safari may appear to work, but they will cause problems later.
          >
          > Your best bet, is to remove the TABLE and make the TD's into DIV's.
          >
          > Does that make sense?
          > Dav
          >
          --Snip--
        • manjunath patil
          hi please tell me how to change the color of layout manager units
          Message 4 of 4 , Jun 1, 2009
          • 0 Attachment
            hi please tell me how to change the color of layout manager units

            On 5/28/09, greglgerg <gregslyon@...> wrote:


            Dav, thanks for the quick reply.

            I was afraid it'd be something like that, but got thrown by it rendering in all of the other browsers. I was hoping against hope that when pulling an element into layout it also changed that element's type. I see now (via firebug) that I was incorrect in that hope.

            I'm attempting to put a facelift on a quite-involved site (It's a Moodle in case anybody is interested) that makes extensive use of tables for layout. I will play with using the YUI copy the content of the target <td>s to <div>s and delete the <table>.

            --- In ydn-javascript@yahoogroups.com, Dav Glass <davglass@...> wrote:
            >
            >
            > That is not a limitation in Layout Manager, you are trying to do
            > something that will result in invalid HTML markup.
            >
            > Layout Manager needs to work on free flowing independent elements.
            > Usually DIV's. It will wrap each unit in order to position
            > it and allow for the resize and scrolling.
            >
            > What you are telling it to do, is build markup like this:
            >
            > <table>
            > <tr>
            > <div><div><td></td></div></div>
            > <div><div><td></td></div></div>
            > <div><div><td></td></div></div>
            > </tr>
            > </table>
            >
            > Which is invalid markup and will not work. IE will definitely not work, FF and
            > Safari may appear to work, but they will cause problems later.
            >
            > Your best bet, is to remove the TABLE and make the TD's into DIV's.
            >
            > Does that make sense?
            > Dav
            >
            --Snip--


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