Css Paper effect not working in FireFox

Question

I created a div that gets dynamically populated with javascript that has a background that resembles a piece of notebook paper. This works in safari and chrome but for some reason doesnt render correctly in firefox. Can anyone give me some insight on whats wrong with my styling ?

This image is of chrome and safari.

This image is of Firefox.

Here is my html and css

<div id="paperBackground" class="col-sm-6 paper">
   <h3 style="text-decoration:underline;"><i>Shopping List<i></h3>
   <div class="multiOrderList">
     <p id="list"></p>
   </div>
   <div style="clear: both;"></div>
 </div>

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background: white;
  background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

+Bonus for ie compatibility

Answer 1

You are missing the unprefixed version in background-size:

-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;     // !!!

fiddle

and for the bonus, added -ms-linear-gradient (and changed unprefixed data)

background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -ms-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: linear-gradient(to top, #848EEC 0%, white 8%) 0 57px;

fiddle2

Answer 2

I have spent countless hours trying to get nice css styling to work in various browsers. Sometimes the best solution is the most simple one. If you just repeat a thin image of the notebook lines (1px by 10px for example), it will cut down a lot on the headache and work in all browsers.

#paperBackground {
  background: url('images/notebook_lines.jpg') repeat;
}

Answer 3

This background pattern is made by Lea Verou, this may be what you're looking for (works on all recent browsers): http://lea.verou.me/css3patterns/#lined-paper

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

Answer 4

The syntax of CSS gradients has changed: the direction of the gradient now must be specified as 'to bottom' instead of just 'top'. Also, there is probably no need in -moz-prefixed version now because the standard syntax has been supported since Firefox 16.