title: Difference in vertical alignment of text in a div between browsers
body: <p>I have a div in my html as follows:</p>
  
  <pre><code>&lt;div class="questInfo"&gt;
     &lt;div class="questBounty"&gt;100&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.questInfo {
    background-color: #fcfcfb;
    padding: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position: relative;
  }
  
  .questBounty {
    position: absolute;
    right: 10px;
    font-family: 'Helvetica';
    font-weight: bold;
    background-color: #ffedcc;
    font-size: 40px;
    padding: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid #808080;
  }
  </code></pre>
  
  <p>When I view this in Safari, I get the following, as I intended:</p>
  
  <p><img src="https://i.imgur.com/VuRQqSX.png" alt="safari"></p>
  
  <p>But in Firefox, the text appears to be pushed up:</p>
  
  <p><img src="https://i.imgur.com/Saug6j5.png" alt="firefox"></p>
  
  <p>Is there some attribute I should have set to achieve the former? </p>
  
  <p><a href="http://jsfiddle.net/sjygD/" rel="nofollow noreferrer">A fiddle.</a></p>
  
  <p>Thanks.</p>