CSS Sprite issue driving me crazy

HTML & CSS
1

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!

2

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.

http://www.alphajulietbravo.com/test/

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

3

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.

4

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

@ajbohac
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;
    width:300px;
}
#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]
}
5

and to keep the nav horizontal:


#menu li {display:inline;}

:wink:

or float it left indeed lol

6

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

Thanks again!

7

You’re welcome :smiley: