Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I believe this is a problem of font metrics. Using line-height to make the vertical alignment may give different results from browser to browser depending on how they render text. I would suggest to use padding to balance out vertical spacing, such as:</p> <pre><code>.alert-notify-circle { min-width:.5em; height:1.3em; padding:0 .375em; font:bold 1em Arial; line-height:1.4em; color: white; border-radius: 1em; border: 2px solid white; box-shadow: 0 .25em .4em rgba(0,0,0,.33); background-clip:padding-box; background-color:#e91823; background-image: linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%); background-image: -o-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%); background-image: -ms-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%); background-image: -moz-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%); background-image: -webkit-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9BABD), color-stop(0.5, #ED3F48), color-stop(0.5, #E91822), color-stop(1, #C50104)); </code></pre> <p>}</p> <p>Check out this badge I built for you as an example. I updated it for better cross-browser compatibility:</p> <p><a href="http://jsfiddle.net/x2xjB/3/" rel="nofollow">http://jsfiddle.net/x2xjB/3/</a></p> <p>Recommended reading:</p> <p><a href="http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/" rel="nofollow">http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload