Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Firefox css spirte problems

A

andyjamesnelson

macrumors 6502
Original poster
Aug 24, 2003
286
0
Jacob's house
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.
 
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
 
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.
 
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.
 
andyjamesnelson said:
The other issue seems to be that the edge fidelity of the tick itself is all blurry!?
Click to expand...

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.
 
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.
 
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.
 
andyjamesnelson said:
So yes this is basically another reason to turn that function off. Its crap.
Click to expand...

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.
 
.

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.
 
andyjamesnelson said:
.

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.
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back