CODEWITHSUNDEEP
csshoverhtml-lists
bob_cobb
bob_cobb

Reputation: 2269

Why is my hover background being shifted

I'm making some tabs, using a background image as the hover state background. The only one that looks fine is "Day". I presume, because it's only 3 characters and the other tabs are 4 characters. Is there a way to make it so the hover background is centered on all of them? Here is the css for the list.

    li {
    font: 9pt "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Trebuchet, serif;
    margin-top: .192333333em;
    float: right;
    height: 19px;
    width: 40px;
    margin-left: 10px;
    display: inline-block;
    margin: 7px;
}
li.current {
    background: url('img/red-current-bg.png') no-repeat;
    line-height: 1.6em;
}

ul#tabnav { 
    margin: 0;
}

ul#tabnav li a {
    text-shadow: 0 1px #800000;
    text-decoration: none;
    padding: 8px 11px;
    line-height: 1.6em;
}

ul#tabnav li:hover {
    background: url('img/red-current-bg.png') 0 0 no-repeat;
}

Upvotes: 1

Views: 100

Answers (1)

Marc Ripley
Marc Ripley

Reputation: 813

Can you just adjust the horizontal position of the background to adjust the pixels or center the image?

ul#tabnav li:hover {
  background: url('img/red-current-bg.png') 3px 0 no-repeat;
}
                            or
ul#tabnav li:hover {
  background: url('img/red-current-bg.png') center top no-repeat;
}

Upvotes: 1

Related Questions