Question

I have a CSS/HTML list that is using an image as the background and a different image when the mouse is hovered over.

The only problem is that the hover image doesn’t line up correctly and has a small but noticable gap.

I have placed a link to a test version to help you to see exactly what I mean.

I am also using Blueprint CSS as a CSS framework.
The source code is below.

As always, thanks in advance

#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}

#navbar ul{ 
list-style: none;
margin:0;
padding:0;
}

#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding-bottom:  1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px; 
}

#navbar li:hover{
background-image: url('../images/navbar-selected.png'); 
background-repeat: repeat-x;
 }  

<div class="container" id="container">
    <div class="prepend-top">
        <div class="clear" id="navbar">
            <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="stock.php">Start HaardHout Vergikelleen</a></li>
                <li><a href="overview.php">In Jouw Regio</a></li>
            </ul>   
        </div>  
    </div>
</div>

Answer 1

Set float: left; for your li elements.

#navbar li { float:left; }