Comments on: Background-position-y: Firefox Fails!

By: Andy E

Andy E — Fri, 06 Apr 2012 21:27:46 +0000

This problem is most inconvenient when using sprites for different states (:hover, :focus, :hover:active, etc). Rather than exponentially increase the size of my CSS file, though I just left it so that Firefox doesn’t change state for my buttons. I’d recommend others do the same if possible, I know it always isn’t. In my case, it’s not a site-breaking feature, so I’d rather have it as one of those subtle things that you might notice when trying out a new browser.

Unfortunately, the Firefox devs have made it clear they won’t be adding this, even though Webkit supports it too. Just another reason to encourage the use of Chrome, I suppose.

By: Giles

Giles — Fri, 06 Apr 2012 21:07:39 +0000

I hit this one making a counter which had a 10×10 sprite matrix (one column for each position, one row for each number). for most browsers: 20 lines of CSS, one for each row and column, specifying x and y coordinates. Setting class=”row-4 col-3″ on the items in the counter then worked great.

Matching this behavior in FF according to their wonderfully “standards correct” approach would have needed *100 lines* of CSS. Haha!! Firefox users get the crappy edition as a result. I could have implemented a patch in JS but really, I didn’t want to coddle a bad way of doing things.

In this case, the FF standardistas need to get with the “worse is better” program.
http://www.jwz.org/doc/worse-is-better.html

By: emaV

emaV — Fri, 06 Apr 2012 20:57:27 +0000

Follow and vote on bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=550426

By: Daniel

Daniel — Thu, 19 Jan 2012 20:02:51 +0000

… reading all the replies, background-position: (x) (y); did the trick for me.

Thanks!

By: Daniel

Daniel — Thu, 19 Jan 2012 19:47:43 +0000

Did a search on the topic and ended up here. Having the same issue in FF9… just letting you know .

Cheers!

By: Geenkaas

Geenkaas — Wed, 07 Dec 2011 15:04:26 +0000

Addin to this epic post; FF _still_ does not support this obviously useful property. For now I am just leaving FF users in the cold with ugly looking backgrounds and non-moving bg sprintes. Servers them well, they are probably used to seeing websites being rendered ugly.

Amazing how many people do not get the problem by the way and insist in copying the other axis in the rule, not seeing how this would bloat the code or just plain override the correct value.

Firefox, get your act together fast!

P.S. Is Kalen’s solution (about 8 replies up) totaly bonkers or is it me? Makes no sense at all certainly does _not_ what I want.

By: Devric

Devric — Mon, 15 Aug 2011 00:50:50 +0000

Jeez, firefox! still not solved the -x -y issue, the thing most people answer is that you can write a combined y;
but imaging i have 20+ sprites in a image each has just a -30px on y axis,
- background-position-y will only need to be set once to -30px for all .class a:hover {}
but since freaking firefox dosent work
- i need to repeat that code for every single .classA a:hover, .classB a:hover, 20 times 2, 40 lines of code. compare to only 21 lines of code.
I dislike IE, but it works with this on both webkit and ie browsers just not freaking firefox….

By: Jt

Jt — Fri, 12 Aug 2011 20:25:59 +0000

No, IE fails :p

By: McShaman

McShaman — Mon, 27 Jun 2011 23:08:56 +0000

You could try a trick like this:

Sprite

div {
background-position: 10px 0;
}

a {
background-position: inherit 10px;
}

I dont know what support is like for the inherit option.

By: Andrew Volk

Andrew Volk — Tue, 31 May 2011 02:12:34 +0000

I think Erkko’s solution pretty much wraps up the initial issue, right?

“background-position-x: 300px;
background-position: 0 300px;”

Works for me, any way.