White Spaces In Between Buttons Only On Google Chrome

Question

So I've been developing a website, and I've ran into a problem. Everything on the website is fine, however when I open the website in Google Chrome, I get some white spaces in between the navigation buttons. I'll show a screenshot then I'll post the code.

Firefox Screenshot:   http://i.imgur.com/59Th3IQ.png
Google Chrome Screenshot:   http://i.imgur.com/Pn5a388.png

CSS

.nav {
    width: 960px;
    height: 60px;
    margin-top: 33px;
}

.nav img {
    float: left;
}

.nav .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.nav .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.nav .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.nav .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.nav .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.nav .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.nav .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }

.nav .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.nav .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.nav .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.nav .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.nav .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.nav .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }


HTML

<div class="nav">
<div class="home"><a href=""><img></a></div>
<div class="register"><a href=""><img></a></div>
<div class="forum"><a href=""><img></a></div>
<div class="banner"><img></div>
<div class="chat"><a href=""><img></a></div>
<div class="downloads"><a href=""><img></a></div>
<div class="donate"><a href=""><img></a></div>
</div>

Answer 1

Why do you have <img> tags in your items with no source? Remove them. Also you href attributes are empty. Consider making them <a href="#"></a>

Make sure your HTML is valid using w3 validator when you are debugging css display issues.