Trouble with CSS on Primary Nav Sprite Images

[scootdc 0]

Please check out the site here: http://barrysellscharleston.com/development2/ I have a three state image for Home that I'm trying to position properly. Nav height is set to 40px and the normal state is white, hover is gray and active is black. Below is the custom code I'm using. #primary-nav {height:40px;} #primary-nav li.menu-item-435 a { background-position: 0 0px; background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll 0 0 transparent; height:40px; width:116px; color: transparent; } #primary-nav li.menu-item-435 a:hover { background-position: 0 -40px; background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll 0 0 transparent; height:40px; width:116px; color: transparent; } #primary-nav li.menu-item-435 a:active { background-position: 0 -80px; background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll left center transparent; height:40px; width: 116px; color: transparent; } What am I doing wrong? Thanx in advance for your help.

[Danny+ 1,327]

Hi Scootdc, Try this instead: [code] #primary-nav li.menu-item-435 a { background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll 0 0 transparent; color: transparent; height: 20px; width: 85px; } #primary-nav li.menu-item-435 a:hover { background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll 0 -40px transparent; color: transparent; height: 20px; width: 85px; } #primary-nav li.menu-item-435 a:active { background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/10/nav-home.png") no-repeat scroll 0 -80px transparent; color: transparent; height: 20px; width: 85px; } [/code] I've linked you to a guide that shows you how to do this, the issue you had was your width/height was set incorrectly and you needed to change the position in the image when changing state from active to hover. http://www.w3schools.com/css/css_image_sprites.asp

[scootdc 0]

Super awesome. Looks to be on the right track.

[catrina 103]

Do you need further assistance?

[scootdc 0]

Actually, yes. I want the tabs to stay with the black background (as in the active state) when on that particular page. What do I need to add? the site again is as: http://barrysellscharleston.com/development2/ Thanks in advance.

[Rob 547]

This might give you some help with styling that function: http://www.w3schools.com/css/css_link.asp

[scootdc 0]

Thanks for the reply Robert but it's still not doing what it should. I'm missing something.

[kastelic 6]

Try changing it to this: [code] #primary-nav li.menu-item-421 a:active , #primary-nav li.menu-item-421.current-menu-item a { background: url("http://barrysellscharleston.com/development2/wp-content/uploads/2011/11/nav-videos.png") no-repeat scroll 0 -80px transparent; color: transparent; border-left: thin solid black; height: 20px; width: 100px; } [/code]

[catrina 103]

Can you please repost?