Whats the correct CSS to apply to a YUI menu bar?

Question

I am trying to figure out the best way to use CSS sprites as header images for a YUI menu control.

I have a CSS sprite with the following CSS :

.navImg0{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -23px;}

How can I apply this to a YUI menu?

So far I've applied the navImg0, navImg1 etc. styles to the buttons.

They come up in the right position but with a few problems:

• there are lines between the items and i need to ideal way to remove them
• when i rollover the button the correct rollover works, but then if i roll off the menu and onto the main part of the screen the button disappears
• the <a> tags under the <li> for each of the top level items doesnt work (theres no text inside anymore).

They have a lot of documentation about applying CSS but I couldn't find any examples of how to use CSS Sprites as images.

Answer 1

1: Sounds like a margin/padding issue. Check the margin and padding on the a and li tags.

2: I've never heard of this happening when it rolls back. Is the image you're using dynamic? In the css, it looks like you're creating it on the fly with some server side code. This could be the problem, or possibly a cache issue of some sort. Not sure.

3: Does your spritesheet have the text already on what's shown? Usually that's how it's works in a spritesheet, and you generally hide the text because of this. If you still want this text, check for some css that sets the a tags to display: none. It may also be in the YUI javascript, I'm not terribly familiar with YUI. ;)

Answer 2

Can you provide a live example of the problems you're seeing? Tough to debug just based off of your CSS snippet.

Not related to your problem, but you could make your CSS smaller & easier to maintain by combining the rules that are repeated every time. Something like

.navImg0, 
.navImg0:hover, 
.navImg1, 
.navImg1:hover, 
.navImg2, 
.navImg2:hover, 
.navImg3, 
.navImg3:hover, 
.navImg4, 
.navImg4:hover { background: url('/dynamicimage/navigation') no-repeat top left; }


.navImg0{width:61px;height:23px;background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-position:-313px -23px;}

Answer 3

I have several YUI menus that use sprites, but it's a bit tricky.

If you're building from markup, it's easy - just add your css class names in the anchor tag. If you're building your menus from javascript, you have to add the class after you render the menu.

YAHOO.util.Dom.addClass(theAnchorElemnt, 'the-sprite-css-class');

Even though YUI provides a classname configuration property it's not the one you want. You need to apply the sprites at the anchor.

Hope that helps.