title: CSS cross browser change layout
body: <p>I have problem with my CSS design when I try at other browser:</p>
  
  <p>so far I make this at <a href="https://i.stack.imgur.com/rokm9.png" rel="nofollow noreferrer">Mozilla</a></p>
  
  <p><img src="https://i.stack.imgur.com/rokm9.png" alt="enter image description here"></p>
  
  <p>The left bar and content fit into browser screen</p>
  
  <p>but when I tried at <a href="https://i.stack.imgur.com/ETvfn.png" rel="nofollow noreferrer">Chrome</a></p>
  
  <p><img src="https://i.stack.imgur.com/ETvfn.png" alt="enter image description here"></p>
  
  <p>i tried to delete the content and become like this (no scroll, but still have some spaces):</p>
  
  <p><img src="https://i.stack.imgur.com/BLLoC.png" alt="enter image description here"></p>
  
  <p>the design changed, I dont know why this happening , because I only started to try CSS design and dont have any experiece :( ANy one can help me fix this?</p>
  
  <p>Coding:</p>
  
  <pre><code>#containerLeft
  {
      z-index: -1;
  }
  
  #leftcolumn {
  
      height:100%;
      background-repeat:none;
      z-index:100;
  }
  .bottom {
      margin: none;
      width: 180px;
      height: 17px;
  }
  ul {
      background-image: url(SlicingImage/action_bar.jpg);
      background-repeat:no-repeat;
      list-style-type: none;
      overflow: hidden;
      padding: 0;
      position: left;
      float:left;
  }
  li {
      list-style:none;
      background-repeat:repeat-y;
  }
  .separator {
      background-image:url(SlicingImage/separator.png);
      background-position:center;
      width:171px;
      /*select your width */
      height:5px;
      /*select your height */
      margin-left:auto;
      margin-right:auto;
  }
  .buttons {
      display:block;
      font-family: Verdana, Arial, sans-serif;
      font-size: 13px;
      color:#FFF;
      background-image:url(SlicingImage/button_unselect.png);
      margin: none;
      height: 53px;
      width: 180px;
      text-transform:uppercase;
      text-align:center;
      position:relative;
      line-height:53px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="containerleft"&gt;
     &lt;div id="leftcolumn"&gt;
      &lt;ul&gt;
              &lt;p&gt;&lt;img src="SlicingImage/alacards_logo.png"/&gt;
  
              &lt;li class="separator"&gt;&lt;/li&gt;            
              &lt;a href="#" id="home" class="showLink" onclick="showHide('example');return false;"&gt;&lt;li class="buttons"&gt;
              home
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="user" class="showLink" onclick="showHide('example2');return false;"&gt;&lt;li class="buttons"&gt;
              users
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="tutorial" class="showLink" onclick="showHide('example3');return false;"&gt;&lt;li class="buttons"&gt;
              tutorial
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="issuer" class="showLink" onclick="showHide('example4');return false;"&gt;&lt;li class="buttons"&gt;
              issuers
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="merchant" class="showLink" onclick="showHide('example5');return false;"&gt;&lt;li class="buttons"&gt;
              merchants
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="partner" class="showLink" onclick="showHide('example6');return false;"&gt;&lt;li class="buttons"&gt;
              partners
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="highlight" class="showLink" onclick="showHide('example7');return false;"&gt;&lt;li class="buttons"&gt;
              high light
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="news" class="showLink" onclick="showHide('example8');return false;"&gt;&lt;li class="buttons"&gt;
              news
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt;
              &lt;a href="#" id="contact" class="showLink" onclick="showHide('example9');return false;"&gt;&lt;li class="buttons"&gt;
              contact us
              &lt;/li&gt;&lt;/a&gt;
              &lt;li class="separator"&gt;&lt;/li&gt; 
              &lt;/p&gt;
           &lt;/ul&gt;       
          &lt;/div&gt;
         &lt;/div&gt; 
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>body
  {
      background-image:url('slicingimage/background.jpg');
      background-repeat:none;
      background-size:100%;
      z-index:-1;
  } 
  
  body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 13px;
      color:#333
  }
  </code></pre>