title: scrollbar in IE6
body: <p>Today, I tried to browse my Joomla website in an ancient browser, IE6.</p>
  
  <p>All elements looked fine, but I saw a long horizontal scrollbar in pages with SqueezeBox (Joomla modal box) enabled.</p>
  
  <p>To find the problem, I edited template and remove all code beside <code>&lt;body&gt;</code> tag. And tried again, I saw blank page, with a close button and a long scrollbar. (<a href="http://i.stack.imgur.com/Xac1K.png" rel="nofollow">screenshot</a>)</p>
  
  <p><code>&lt;body&gt;</code> contents:</p>
  
  <pre><code>&lt;div tabindex="-1" style="z-index: 65555; opacity: 0;" aria-hidden="true" id="sbox-overlay"&gt;&lt;/div&gt;
  &lt;div class="shadow" style="z-index: 65557;" aria-hidden="true" role="dialog" id="sbox-window"&gt;
      &lt;div style="opacity: 0;" id="sbox-content"&gt;&lt;/div&gt;
      &lt;a aria-controls="sbox-window" role="button" href="#" id="sbox-btn-close"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>&lt;body&gt;</code> styles:</p>
  
  <pre><code>color: #000000;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  </code></pre>
  
  <p>modal.css (SqueezeBox stylesheet):</p>
  
  <pre><code>/**
   * SqueezeBox - Expandable Lightbox
   *
   * Allows to open various content as modal,
   * centered and animated box.
   *
   * @version     1.3
   *
   * @license     MIT-style license
   * @author      Harald Kirschner &lt;mail [at] digitarald.de&gt;
   * @author      Rouven Weßling &lt;me [at] rouvenwessling.de&gt;
   * @copyright   Author
   */
  
  #sbox-overlay {
      position: absolute;
      background-color: #000;
      left: 0px;
      top: 0px;
  }
  
  #sbox-window {
      position: absolute;
      background-color: #fff;
      text-align: left;
      overflow: visible;
      padding: 10px;
      /* invalid values, but looks smoother! */
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
  }
  
  #sbox-window[aria-hidden=true],
  #sbox-overlay[aria-hidden=true] {
      display: none;
  }
  
  #sbox-btn-close {
      position: absolute;
      width: 30px;
      height: 30px;
      right: -15px;
      top: -15px;
      background: url(../images/modal/closebox.png) no-repeat center;
      border: none;
  }
  
  .sbox-loading #sbox-content {
      background-image: url(../images/modal/spinner.gif);
      background-repeat: no-repeat;
      background-position: center;
  }
  
  #sbox-content {
      clear: both;
      overflow: auto;
      background-color: #fff;
      height: 100%;
      width: 100%;
  }
  
  .sbox-content-image#sbox-content {
      overflow: visible;
  }
  
  #sbox-image {
      display: block;
  }
  
  .sbox-content-image img {
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .sbox-content-iframe#sbox-content {
      overflow: visible;
  }
  
  /* Hides scrollbars */
  .body-overlayed {
      overflow: hidden;
  }
  
  /* Hides flash (Firefox problem) and selects (IE) */
  .body-overlayed embed, .body-overlayed object, .body-overlayed select {
      visibility: hidden;
  }
  
  #sbox-window embed, #sbox-window object, #sbox-window select {
      visibility: visible;
  }
  
  /* Shadows */
  #sbox-window.shadow {
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
      -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  }
  
  .sbox-bg {
      position: absolute;
      width: 33px;
      height: 40px;
  }
  
  .sbox-bg-n {
      left: 0;
      top: -40px;
      width: 100%;
      background: url(../images/modal/bg_n.png) repeat-x;
  }
  .sbox-bg-ne {
      right: -33px;
      top: -40px;
      background: url(../images/modal/bg_ne.png) no-repeat;
  }
  .sbox-bg-e {
      right: -33px;
      top: 0;
      height: 100%;
      background: url(../images/modal/bg_e.png) repeat-y;
  }
  .sbox-bg-se {
      right: -33px;
      bottom: -40px;
      background: url(../images/modal/bg_se.png) no-repeat;
  }
  .sbox-bg-s {
      left: 0;
      bottom: -40px;
      width: 100%;
      background: url(../images/modal/bg_s.png) repeat-x;
  }
  .sbox-bg-sw {
      left: -33px;
      bottom: -40px;
      background: url(../images/modal/bg_sw.png) no-repeat;
  }
  .sbox-bg-w {
      left: -33px;
      top: 0;
      height: 100%;
      background: url(../images/modal/bg_w.png) repeat-y;
  }
  .sbox-bg-nw {
      left: -33px;
      top: -40px;
      background: url(../images/modal/bg_nw.png) no-repeat;
  }
  @-moz-document url-prefix() {
      .body-overlayed {
      overflow: visible;
      }
  }
  </code></pre>
  
  <p>What's wrong?</p>