CSS кросс-браузер изменить макет

У меня проблема с моим дизайном CSS, когда я пытаюсь в другом браузере:

пока я делаю это в Mozilla

Левая панель и содержимое вписываются в экран браузера

но когда я пробовал в Chrome

я попытался удалить контент и стал таким (без прокрутки, но все еще есть пробелы):

дизайн изменился, я не знаю, почему это происходит, потому что я только начал пробовать CSS-дизайн и не имею никакого эксперимента :( Кто-нибудь может помочь мне исправить это?

Кодирование:

#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;
}

HTML

<div id="containerleft">
   <div id="leftcolumn">
    <ul>
            <p><img src="SlicingImage/alacards_logo.png"/>

            <li class="separator"></li>            
            <a href="#" id="home" class="showLink" onclick="showHide('example');return false;"><li class="buttons">
            home
            </li></a>
            <li class="separator"></li>
            <a href="#" id="user" class="showLink" onclick="showHide('example2');return false;"><li class="buttons">
            users
            </li></a>
            <li class="separator"></li>
            <a href="#" id="tutorial" class="showLink" onclick="showHide('example3');return false;"><li class="buttons">
            tutorial
            </li></a>
            <li class="separator"></li>
            <a href="#" id="issuer" class="showLink" onclick="showHide('example4');return false;"><li class="buttons">
            issuers
            </li></a>
            <li class="separator"></li>
            <a href="#" id="merchant" class="showLink" onclick="showHide('example5');return false;"><li class="buttons">
            merchants
            </li></a>
            <li class="separator"></li>
            <a href="#" id="partner" class="showLink" onclick="showHide('example6');return false;"><li class="buttons">
            partners
            </li></a>
            <li class="separator"></li>
            <a href="#" id="highlight" class="showLink" onclick="showHide('example7');return false;"><li class="buttons">
            high light
            </li></a>
            <li class="separator"></li>
            <a href="#" id="news" class="showLink" onclick="showHide('example8');return false;"><li class="buttons">
            news
            </li></a>
            <li class="separator"></li>
            <a href="#" id="contact" class="showLink" onclick="showHide('example9');return false;"><li class="buttons">
            contact us
            </li></a>
            <li class="separator"></li> 
            </p>
         </ul>       
        </div>
       </div> 

Тело:

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
}