CSS Sprites being strange in Opera

Get Started
1

Hi, I’m pretty new to CSS though I do have a firm grasp of it all. I recently tried my hand at making a social media menu using sprites to display the icons and their hover states.
The menu works exactly as I want whereby the Hover state moves into place correctly, although in Opera there is a problem.
On hover the bottom half of the icon image changes to the hover state while the top does not. it is as though the hover state is just half the icon it should be and then is being overlaid onto the non-hovered version of the icon. seeing as this works perfectly fine on all other browsers I have tried I am not at all sure what to think. the page is very simple not much could be conflicting and im not sure what would even make it act in such a way if I were to try to emulate the effect.

Anyway I was just hoping to learn something about CSS from the educated people on this site, and perhaps a fix, vendor prefix? I don’t know.

All help will be much appreciated.

(edit)
Also one of the icons has a slightly different issue, before hover the top half looks hovered, on hover the bottom half becomes the intended hover state and so the whole icon looks correct. its basically doing the same thing on hover that all the icons do but it starts out with the top half of the hover sprite in place already.

2

Hi xamrewop. Welcome to the forums. :slight_smile:

Hm, Opera is usually fine with these—especially if the other browsers are. Can you post a link to this in action?

3

Unfortunately the site is not live, I am using it as a scratchpad of sorts. It seems as though it could just be a glitch because I just loaded it and for the most part it was the same except for the fact that the one anomaly icon which was acting differently was acting just as the others, BUT a different one had that problem. I’ll try to figure something out as far as getting it online for you to see it live. but im not sure, I don’t have any free domains. and the two I do have are running with WordPress so I’m not sure about putting up a single page.

4

Ok maybe I should have said this, but the <div> that makes up the menu is set to scale and change opacity when hovered. so it starts out smaller and transparent then on hover it becomes full size and opaque. so I have noticed that the one “Odd” icon is dictated by whichever icon is being hovered upon at the time of the initial <div> hover event. very odd.

5

There’s no problem adding other page files or folders to your site’s root folder. :slight_smile: