IE6 hover problems

I’ve been having issues with a WordPress theme of mine. Site is here.

The rounded corner hovers are working fine in Firefox and IE7, although I was in IE6 the right part of the hover tab doesn’t show up. I checked on another computer of mine and true enough, it wasn’t there.

My question is, how can I make that part of the tab show up in IE6? I’ve tried working on it for hours but I’ve yet to still figure it out.

This is the CSS:

#navi{
    float: left;
    height: 45px;
    width: 100%;
    background: url(images/navbg.gif) no-repeat;
    overflow: hidden;
}

#nav {
    list-style: none;
    margin: 7px 0 0 0;
    padding-top: 7px;
}

#nav li {
    float: left;
    height: 31px;
    background: url(images/navtabactiver.png) top right no-repeat;
    margin: 0 3px;
    white-space: nowrap;
}

#nav .page_item a{
    color: #006699;
    display: block;
    background: url(images/navtabactivel.png) top left no-repeat;
    text-decoration: none;
    padding: 0px 10px 0px 10px;
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 31px;
}

#nav li:hover {
    background-position: 100% -38px;
    color: #fff;
}

#nav .page_item a:hover {
    background-position: 0px -38px;
    border: none;
    color: #BFEBA3;
}

#nav li.current_page_item {
    color: #fff;
    text-decoration: none;
    background: url(images/navtabr.png) top right no-repeat;
}

#nav .current_page_item a, #nav .current_page_item a:visited{
    color: #fff;
    text-decoration: none;
    background: url(images/navtabl.png) top left no-repeat;
}

And this is the code that goes in the header:

<div id="navi">
<ul id="nav">
<li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
<?php $pages = wp_list_pages('sort_column=menu_order&depth=1&title_li=&echo=0');
print_r($pages); ?>
</ul>
</div>