SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Sprites being strange in Opera.

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi xamrewop. Welcome to the forums.

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

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by xamrewop View Post
    I do have are running with WordPress so I'm not sure about putting up a single page.
    There's no problem adding other page files or folders to your site's root folder.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •