CSS sprite buttons working fine on their own, but get confused when more than one on page

[gazmccarthy]

Hi
I want to have a number of CSS sprite buttons in my navigation.
Each button works fine on their own, but when I put more than one on page, they start to get confused.
Can anyone tell me what I’m doing wrong please?

Here’s the first button (The Home Button) working fine:
http://www.garrymccarthy.com/test1/index.html
It’s CSS: http://www.garrymccarthy.com/test1/style.css

Here’s the second button (The Books Button) working fine:
http://www.garrymccarthy.com/test2/index.html
It’s CSS: http://www.garrymccarthy.com/test2/style.css

Here’s both of them together!!:
http://www.garrymccarthy.com/test3/index.html
It’s CSS: http://www.garrymccarthy.com/test3/style.css

Any help greatly appreciated.
Thanks

[Paulie_D]

Well obviously the .MagBtn class isn’t taking effect…not sure why though.

BTW…I’m not sure what this is doing (or even if it’s related) as it seems to be unclosed

.MagBtn:hover, .MagBtn:focus /* Line 221 of CSS */

[Paulie_D]

Actually, I’ve found the same in Line 202 for the .HomeBtn

.HomeBtn:hover, .HomeBtn:focus

Because it’s not opened/closed with `{` and `}` it’s affecting the subsequent CSS.

Thus the hover state of the HomeBtn is now .MagBtn :)

[gazmccarthy]

You saved the day again, seems to be working now!
http://www.garrymccarthy.com/test3/index.html
Thank you.

[Paulie_D]

Happy to help.

Always worth trying a validator first: http://jigsaw.w3.org/css-validator/

You have a couple: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.garrymccarthy.com%2Ftest3%2Findex.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

[gazmccarthy]

Thanks, I checked them there. That’s really handy, I’ll bookmark that!

[Author]

Posts