Different background position for Firefox and Chrome

Question

I am using an image as background in a div,I want to use different postioning for Firefox and Chrome.

I want to use this one for Mozila:

background-position: left -14px bottom -1px !important;

I want to use this one for Chrome:

background-position: left -14px bottom -2px !important;

Is it possible ? Please advice me..

hello again :p....please browse before you ask... => http://stackoverflow.com/questions/4332117/how-to-write-specific-css-for-mozilla-chrome-and-ie — NoobEditor, Jan 08 '14 at 07:58
@NoobEditor thanks again for your comment. I wanted -moz or -web-toolkit css attributes for this . i think its not there. thanks for the useful link. — Naju, Jan 08 '14 at 08:12

score 3 · Answer 1 · answered Jan 09 '14 at 17:55

You can use specific selectors for FF and Chrome :

To target Chrome :

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .yourElement {
     background-position: left -14px bottom -2px !important;
   }
}

To target FF :

@-moz-document url-prefix() { 
  .yourElement {
    background-position: left -14px bottom -1px !important;
  }
}

That is way better than using User Agent.

score 1 · Answer 2 · answered Jan 08 '14 at 08:17

1

First : Try to reset your CSS before you code ?

I don't think they are different pixel things between Chrome and Firefox (but not IEs)

Soloution : Add a CSS reset stylesheet before your custom CSS

Example : http://necolas.github.io/normalize.css/

And re-check your positions agian

Good luck !

answered Jan 08 '14 at 08:17

l2aelba

This doesn't answer the question, and it's not true that Firefox and Chrome use identical positioning systems. – Benny Schmidt Sep 16 '15 at 20:16
@benny, im pretty sure about resetting CSS, will prevent pixel problems (at most) for modern standard browsers. – l2aelba Sep 17 '15 at 07:19
No, resetting CSS has nothing at all to do with the problem here. The question is "how do I target different browsers in CSS?" Resetting the CSS does not allow you to do that; it just makes it so it all looks similar in all browsers. @enguerranws' answer above is the best here. – Benny Schmidt Sep 18 '15 at 14:56

score 0 · Answer 3 · answered Jan 08 '14 at 08:02

0

The code to check if browser is Chrome you can use:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

And firefox:

var FIREFOX = /Firefox/i.test(navigator.userAgent);

answered Jan 08 '14 at 08:02

edonbajrami

3 Answers3