Navigation border on left side is off by two pixels

[MySQL_Narb]

 

As you can see, the border on the left side is not lined up properly with the bottom part of the navigation menu. Yet, the right half is perfectly fine. Is there a way to fix this? Here's my resources:

 

CSS:

 

.navbar{
    float:left;
    width:22%;
}

#navbarbg{
    text-align:center;
    vertical-align: top;
    margin-left:auto;
    margin-right:auto;
    width:114px;
}

.navbar ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
}

.navbar li{
    text-align:left;
    margin:0px;
    padding:0px;
    background-image:url('../img/highscores/derp.png');
    background-repeat:repeat-y;
    border-right:1px solid black; 
    border-left:1px solid black;
}

 

HTML:

 

<div class="navbar">
            <div id="navbarbg">
                <ul>
                    <li>     <a href="#">Overall</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/attack.png">Attack</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/defence.png">Defence</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/strength.png">Strength</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/hitpoints.png">Hitpoints</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/ranged.png">Ranged</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/prayer.png">Prayer</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/magic.png">Magic</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/cooking.png">Cooking</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/woodcutting.png">Woodcutting</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/fletching.png">Fletching</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/fishing.png">Fishing</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/firemaking.png">Firemaking</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/crafting.png">Crafting</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/smithing.png">Smithing</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/mining.png">Mining</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/herblore.png">Herblore</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/agility.png">Agility</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/thieving.png">Thieving</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/slayer.png">Slayer</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/farming.png">Farming</a></li>
                    <li> <a href="#"><img src="../img/highscores/skills/runecraft.png">Runecraft</a></li>
                </ul>
            </div>
            <img src="../img/highscores/Bottomwithbg.png">
        </div>

[anevins]

I assume you have the background image of the flag split into sections.

 

You could add

padding-left: 2 pixels

to one of the containing elements, such as ul or divs,

then margin-left: -2px.

 

[MySQL_Narb]

  Quote

I assume you have the background image of the flag split into sections.

 

You could add

padding-left: 2 pixels

to one of the containing elements, such as ul or divs,

then margin-left: -2px.

 

 

.navbar ul{

    padding-left: 2px;

    margin-left: -2px;

    list-style-type: none;

    padding: 0px;

    margin: 0px;

    margin-left:auto;

    margin-right:auto;

}

 

Added that, but it didn't seem to change a thing at all. :/

[anevins]

You may need to also increase the width of #navbarbg

 

[anevins]

Do you have an on-line version that you could show us?

[Drummin]

I think it's the borders messing it up.  Also being an image background, I think a width should be defined.  Also 0 is not defined with px, just 0.  You could try a padding of 1 OR a margin of -1. 

.navbar li{

    text-align:left;

    margin:0 -1px;

    padding:0px;

    background-image:url('../img/highscores/derp.png');

    background-repeat:repeat-y;

    border-right:1px solid black;

    border-left:1px solid black;

}

[Mahngiel]

You need to either increase the width of #navbarbg or decrease the width of your footer image.