title: Menu not showing correctly once called from iframe
body: <p>I am having a problem in displaying a iframe on a page.</p>
  
  <p>I have a top frame that displays a logo along the top (which is fine)
  I have a menu down the left side of the page. (which I am having a problem with)
  I have a frame to the right of the menu that will display my page.</p>
  
  <p>My index.htm page is loading all the frames and looks like this:</p>
  
  <pre><code>&lt;script language="javascript"&gt;  
      function win_resize()
      {
          var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight; 
              document.getElementById('leftMenu').height = _docHeight - 90;
      }
  &lt;/script&gt;
  
  &lt;body onresize="win_resize()"&gt;
       &lt;!-- Header --&gt;
      &lt;div id="header"&gt;
          &lt;div&gt;
              &lt;img src="logo.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;!-- Left Menu --&gt;
      &lt;div id="left-sidebar" &gt;
          &lt;iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  
       &lt;!-- Main Page --&gt; 
      &lt;div id="content"&gt;
          &lt;iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My menu.htm page has the following code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  
  &lt;html lang="en-GB"&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="_styles.css" media="screen"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;ol class="tree"&gt;
          &lt;li&gt;
              &lt;li class="file"&gt;&lt;a href="file1.htm"&gt;File 1&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href="file2.htm"&gt;File 2&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href="file3.htm"&gt;File 3&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href="file4.htm"&gt;File 4&lt;/a&gt;&lt;/li&gt;
              &lt;li class="file"&gt;&lt;a href="file5.htm"&gt;File 5&lt;/a&gt;&lt;/li&gt;
  
          &lt;/li&gt;
      &lt;li&gt;
              &lt;label for="folder2"&gt;My Test 1&lt;/label&gt; &lt;input type="checkbox" id="folder2" /&gt; 
  
              &lt;ol&gt;
              &lt;li class="file"&gt;&lt;a href="status.htm"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
  
                      &lt;label for="subfolder2"&gt;test1&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;label for="subfolder2"&gt;test2&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;label for="subfolder2"&gt;test3&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
      &lt;/li&gt;
      &lt;li&gt;
              &lt;label for="folder2"&gt;My Test 2&lt;/label&gt; &lt;input type="checkbox" id="folder2" /&gt; 
  
              &lt;ol&gt;
              &lt;li class="file"&gt;&lt;a href="status.htm"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
  
                      &lt;label for="subfolder2"&gt;test1&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;label for="subfolder2"&gt;test2&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;label for="subfolder2"&gt;test3&lt;/label&gt; &lt;input type="checkbox" id="subfolder2" /&gt; 
                      &lt;ol&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file2&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file3&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file4&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file5&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="file"&gt;&lt;a href=""&gt;file6&lt;/a&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                  &lt;/li&gt;
      &lt;/li&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My _styles.css file has the following:</p>
  
  <pre><code>/* Just some base styles not needed for example to function */
  *, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
  
  body, form, ul, li, p, h1, h2, h3, h4, h5
  {
      margin: 0;
      padding: 0;
  }
  body { background-color: #606061; color: #ffffff; margin: 0; }
  img { border: none; }
  p
  {
      font-size: 1em;
      margin: 0 0 1em 0;
  }
  
  html { font-size: 100%; /* IE hack */ }
  body { font-size: 1em; /* Sets base font size to 16px */ }
  table { font-size: 100%; /* IE hack */ }
  input, select, textarea, th, td { font-size: 1em; }
  
  /* CSS Tree menu styles */
  ol.tree
  {
      padding: 0 0 0 30px;
      width: 300px;
  }
      li 
      { 
          position: relative; 
          margin-left: -15px;
          list-style: none;
      }
      li.file
      {
          margin-left: -1px !important;
      }
          li.file a
          {
              background: url(document.png) 0 0 no-repeat;
              color: #fff;
              padding-left: 21px;
              text-decoration: none;
              display: block;
          }
          li.file a[href *= '.pdf']   { background: url(document.png) 0 0 no-repeat; }
          li.file a[href *= '.html']  { background: url(document.png) 0 0 no-repeat; }
          li.file a[href $= '.css']   { background: url(document.png) 0 0 no-repeat; }
          li.file a[href $= '.js']        { background: url(document.png) 0 0 no-repeat; }
      li input
      {
          position: absolute;
          left: 0;
          margin-left: 0;
          opacity: 0;
          z-index: 2;
          cursor: pointer;
          height: 1em;
          width: 1em;
          top: 0;
      }
          li input + ol
          {
              background: url(toggle-small-expand.png) 40px 0 no-repeat;
              margin: -0.938em 0 0 -44px; /* 15px */
              height: 1em;
          }
          li input + ol &gt; li { display: none; margin-left: -14px !important; padding-left: 1px; }
      li label
      {
          background: url(folder-horizontal.png) 15px 1px no-repeat;
          cursor: pointer;
          display: block;
          padding-left: 37px;
      }
  
      li input:checked + ol
      {
          background: url(toggle-small.png) 40px 5px no-repeat;
          margin: -1.25em 0 0 -44px; /* 20px */
          padding: 1.563em 0 0 80px;
          height: auto;
      }
          li input:checked + ol &gt; li { display: block; margin: 0 0 0.125em;  /* 2px */}
          li input:checked + ol &gt; li:last-child { margin: 0 0 0.063em; /* 1px */ }
  </code></pre>
  
  <p>The page seems to show correctly except that the menu on the left shows a checkbox where it shouldn't and shold be releaced with the + or - icons.</p>
  
  <p>If I open my menu.htm by it's self it shows correctly</p>
  
  <p><img src="https://i.stack.imgur.com/q4yUy.png" alt="enter image description here"></p>
  
  <p>however when I view my index.htm page (which loads the menu in the iframe) it doesn't show the menu correctly as shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/ZvLjX.png" alt="enter image description here"></p>
  
  <p>however, as soon as I add the following code it shows the menu correctly:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  </code></pre>
  
  <p>however, it doesn't show my document height correctly using my win_resize function.</p>
  
  <p>I am guessing that the last bit of code is stopping my document height code from displaying the correct height.</p>
  
  <p>I need that function so it can display my menu frame correctly on the page.</p>
  
  <p>Does anyone know where I have gone wrong, as it works fine by it's self but soon as I call it from a iframe it doesn't display correctly?</p>
  
  <p>An I using the correct code in my function to get the documents height in full or is there a CSS I can use to get the documents height?</p>