CSS Menu Problem

Question

my css for the menu

     ul#menubar {
     width: 800px;
     padding: 27px 10px 5px 10px;
     list-style: none;
     text-align: center;
     }

    ul#menubar li {
 display: inline;
    }
    ul#menubar li a{
 border-right: 1px solid #111111;
 font: 12px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
 padding: 5px 10px 8px 10px;
    }

    ul#menubar li a#last {
 border-right: none;
    }

    ul#menubar li a:hover, ul#menubar li a:active{
 background: #8d4d09 url("images/hover.gif") bottom center no-repeat;
 padding-bottom: 8px;
    }

menu html

    <ul id="menubar">
        <li><a href="#" target="_self">Home</a></li>
        <li><a href="#" target="_self">Sale</a></li>
        <li><a href="#" target="_self">Purchase</a></li>
        <li><a href="#" target="_self">Rent</a></li>
        <li><a href="#" target="_self">Developments</a></li>
        <li><a href="#" target="_self">Interior Decorators</a></li>
        <li><a href="#" target="_self">Maps</a></li>
        <li><a id="last" href="#" target="_self">Legal Documents</a></li>
    </ul>

preview

problem is that i cant figure out the space between the border-right and the anchor when the link is hovered.

what is causing this space and how can it be removed.

The hovered effect is shown on "Purchase" link.

Answer 1

You are setting padding-bottom: 8px on hover, you already have padding: 5px 10px 8px 10px; applied to the element. Do you need to set the padding-right on hover too as you will still have 10px applied to it?

Answer 2

ul#menubar li {
 display: inline;
 float: left;
}

Answer 3

I'm thinking it could be the browser default style to apply a margin to the left/right of the li. Try setting margins to 0.

Answer 4

the problem is display: inline; - in the source-code you have linebreaks between your li's, wich are represendet as a space on the site (as alwys when you use inline-elements and/or text, see example below).

to avoid this, use float: left; or define your ul/li in one line, without spaces/linebreaks between them.

*example:

this sourcecode:

this
is
text

gives this output:

this is text

(linebreaks/whitespace are converted to 1 space between words (and the li's are "words" in your case))