Firefox css spirte problems

Discussion in 'Web Design and Development' started by andyjamesnelson, Dec 14, 2008.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hello.

    I'm pretty sure I have the css sprite technique down. I have no problems on my imac in either Safari / Firefox and Opera. I even have no problems with the technique in IE! Whoop.

    The only place I'm having a problem is on my girlfriends Mac book in Firefox!?

    I created this page to isolate and test the problem (the normal and hover states should look exactly the same for purposes of this example).

    http://andyjamesnelson.co.uk/example/

    Hopefully if you look at the page and check the source etc you will have no problems.

    The problem on the macbook is there on hover the tick moves ever so slightly to the left. Say 1px!!!?

    I have checked and double checked the source png and the two states are identical.

    The other issue seems to be that the edge fidelity of the tick itself is all blurry!?

    Can anyone help with this its really bugging me.

    Andy.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    What version of FF is installed? I'm using FF 3.0.4 on a MacBook and all looks fine.

    Also, why did you start a new thread when you already have this being discussed?
     
  3. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #3
    Hey,

    Yes its the latest version of firefox. 3.4 and the Mac book is running 10.5

    I started a new thread because I thought my 1st one wasn't clear and I had made an example etc.

    Sorry if this is a problem.

    Yes its really strange that its happening. Has anyone looked at the source to see if they think I am doing anything wrong with the css?

    Andy
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Well, since I'm not seeing the same issue and I'm using the same type of computer and browser, then something is up with her Firefox. In the other thread I asked about if there might be a add-on issue. Did you try starting up FF in safe mode to see if the problem persisted? The problem doesn't look to be the CSS since it works on everyone else's browser.

    There's no real problem with a double thread, but is redundant and you didn't reply to people's posts there.
     
  5. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #5
    Hey yes I tried Firefox in safe more and its still happening. I even tried re-installing the application and it made no difference.

    Could it have something to do with the different view port size / ratio on the macbooks?

    Its really odd.

    Andy.
     
  6. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #6
    Point taken about the double thread.

    My bad.

    Andy
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Blurry, that's what finally got me thinking. I increased Firefox's zoom by two notches and I started to get the blurriness and a 1px shift on hover (though only on the right side, probably a rounding issue). See if this helps. Going one notch smaller (in zoom) also gets the same effect.
     
  8. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #8
    So what your saying is that you think the issue is with Frirefox's page zoom?

    If so then that a pretty big bug for them.

    Andy
     
  9. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #9
    Hey,

    Yes I just looked on the Mac Book to see zoom page was on and it was and the browser was at zoom +1 which was causing the blur! And presumably the movement on roll over comes from the scaling after zoom!?

    So yes this is basically another reason to turn that function off. Its crap.

    Thanks so much for your help on this anglewat. I thought I was going crazy.

    Andy.
     
  10. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #10
    I think someone should write an article about this problem and let other developers know of the issue. Its been very confusing and frustrating for me.

    Does anyone know a good resource that lists browser bugs and fixes?

    Andy.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Most people aren't going to care about a 1px shift. I use the zoom all the time because people keep creating sites with tiny text, and it can be handy to zoom into an image even though it does get blurry. It is a weird bug though since it seems to be calculating the width differently on hover. Maybe you should report it to Bugzilla.
     
  12. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #12
    .

    Well thanks again for your help. I personally think people should turn of the page zoom and just use the font zoom. Otherwise why bother making elastic sites?

    Andy.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    Well, not all browsers do zoom. The zoom has been catching on because not enough designers were using elastic sites. When I use to use text increase it would break a number of sites, so that always sucked, and is why I prefer the page zoom instead. I feel designers should still aim at creating elastic sites though, they'll zoom better too.
     

Share This Page