CSS Sprite issue driving me crazy

This is my first post on here and I’m wondering if someone can help me.

I am using a css sprite for a horizontal navigation menu. It works great, but each li is showing 2 positions of the sprite rather than just the one position that I am specifying. I’ve gone over the code a dozen times and am missing something obviously.

You can see it here:

alphajulietbravo dot com slash test slash

(it won’t let me put the link because I’m a new member)

I appreciate any help. Thanks!

Hi ajbohac, Welcome to SP :slight_smile:

I think you will be able to post links after you make 5 posts if I remember correctly.


In the meantime I’ll post the link for you and we will see if we get things sorted out. :wink:

The sprite image is being used as a background on both the list item and the anchors, but should just be on the anchors. Here is the offending rule:

#menu li, #menu li a {
background:transparent url(images/sprite.png) no-repeat scroll 0 0;

Separate these out so that the sprite doesn’t appear on the Li.

Good eye ralph :slight_smile:
I had it straightened out too but I got distracted with something else.

You can loose that display:block that is set with the floats in this case.
Though not technically the same, the float will generate a block box of it’s own. Just be sure to get the float back on the #menu li

[B]#menu[/B] {
    [COLOR=Red]/*display: block;*/[/COLOR]
    [COLOR=Blue]float: right;[/COLOR]
    margin-top: 60px;
#menu li a {
    text-indent: -9999px;
[B]#menu li[/B]{[COLOR=Blue]float: left;[/COLOR]}

[B]#menu li a[/B] {
    background: url(images/sprite.png);
    background-repeat: no-repeat;
    [COLOR=Red]/*display: block;*/[/COLOR]
    height: 70px;
    [COLOR=Blue]float: left;[/COLOR]

and to keep the nav horizontal:

#menu li {display:inline;}


or float it left indeed lol

You guys are incredibly helpful. I appreciate your help and how quick you were to reply.

Thanks again!

You’re welcome :smiley: