My navigation is not consistent in all browsers

My navigation is not consistent in all browsers

Hi Everyone, I'm very new to jQuery. I have an issue with my navigation not showing up correctly in browsers, namely IE and on mobile devices. Here is the URL http://di-giovanna.com/
And I have my .css style sheet below. Thanks for your help in advance!!

@charset "UTF-8";
/* CSS Document */

* {
    margin:0px;
    padding:0px;
    border:0px;
}

#slideshowContainer {
    width: 900px;
    height: 273px;
}

.slideshow {
    height: 273px;
}

.slideshow img {
   
}

#nav {
    list-style-type:none;
    z-index:999;
}

#nav li a {
    display:block;
    text-indent:-9999px;
    outline:none;
}

#prev a {
    background:url(../images/slde-show-top/arrow-left.png);  
    width:39px;
    height:39px;
    position: absolute;
    top:250px;
    left:520px;
    z-index:999;
    opacity:1;
}

#next a {
    background:url(../images/slde-show-top/arrow-right.png);
    width:39px;
    height:39px;
    position: absolute;
    top:250px;
    right:520px;
    z-index:999;
    opacity:1;
}

#next a:hover {
    background:url(../images/slde-show-top/arrow-right.png);
    opacity:1;
}

#prev a:hover {
    background:url(../images/slde-show-top/arrow-left.png); 
    opacity:1;
}