Question

Being new to css I found this first problem. I’m pretty sure this is some basic stuff and I’ll be very thankful if anyone can give me at least a hint in which direction I should move. I think I might just be heading in the wrong direction.

The problem:

I got this navigation with some separators and rollovers. The problem is that i can’t seem to add the left margin that is between the separator and the hover of the li. The separator always sticks to the hover. Adding the right margin works fine, but when i try to add the left one it just doubles the size of the right margin.

Here is the pic: http://bit.ly/OQTMda

#nav {
    position: absolute;
    top: 200px;
    width: 946px;
    height: 46px;
    padding: 7px;
    background: url('images/nav_bg.gif') top left repeat-x;
    }

#nav li {
    list-style: none;
    float: left;
    line-height: 46px;
    margin-right: 7px;
    }

#nav li:hover {
    background: url('images/nav_hover.gif') top left repeat-x;
    }

#nav li + li {
    background: url('images/separator.gif') top left no-repeat;
    }

#nav a {
    margin-left: 35px;
    margin-right: 35px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    }

Any advice given is appreciated. Thanks in advance!

Answer 1

Avoid styling li elements with margins – paddings – line-heights. Rather style your inner a elements to achieve better results.

Always think about li elements like aligned rude boxes to hold your design