0

I have wrapped an input slider and two overlay boxes into a div container. I have fitted everything and it is looking fine so far. Nevertheless, I am experiencing a weird offsetting bug in Firefox and it is driving me nuts. Firefox seems to always offset the input slider to the right. I have colored the input slider in purple to show this offset more clearly. How can I prevent this?

You can view the current version here: http://jsfiddle.net/ZDLTQ/24/ The corresponding div wrapper is named .slider_wrapper and the input slider #range. Is there anything that I am not considering?

David
  • 14,646
  • 22
  • 52
  • 64
Harald Bach
  • 1
  • 1

1 Answers1

0

The problem is with the 

input[type=range],
input[type=range]::-webkit-slider-thumb

css rule

when using vendor specific selectors (not properties) they have to be on their own (or other same-vendor selectors).

Otherwise the parsing engine considers the selector wrong and ignores the whole rule..
(see Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? for more)

Try with

input[type=range] {
  -webkit-appearance:none;
  margin:0; padding:0; border:0;
  }

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  margin:0; padding:0; border:0;
}
Community
  • 1
  • 1
Gabriele Petrioli
  • 173,972
  • 30
  • 239
  • 291