Easiest css for Facebook style "red" notifications

Question

I need a facebook style notification, but getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications.

What is the best cross-browser way of ensuring the notifications show up nicely? Not adverse to using javascript, but pure css is of course preferable

Answer 1

The best way to achieve this is by using absolute positioning:

/* Create the blue navigation bar */  .navbar {    background-color: #3b5998;    font-size: 22px;    padding: 5px 10px;  }    /* Define what each icon button should look like */  .button {    color: white;    display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */    position: relative; /* All 'absolute'ly positioned elements are relative to this one */    padding: 2px 5px; /* Add some padding so it looks nice */  }    /* Make the badge float in the top right corner of the button */  .button__badge {    background-color: #fa3e3e;    border-radius: 2px;    color: white;       padding: 1px 3px;    font-size: 10px;        position: absolute; /* Position the badge within the relatively positioned button */    top: 0;    right: 0;  }

<!-- Font Awesome is a great free icon font. -->  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>    <div class="navbar">    <div class="button">      <i class="fa fa-globe"></i>      <span class="button__badge">2</span>    </div>    <div class="button">      <i class="fa fa-comments"></i>      <span class="button__badge">4</span>    </div>  </div>

Answer 2

Here's one that includes animation for when the count changes.

http://jsfiddle.net/rahilsondhi/FdmHf/4/

<ul> <li class="notification-container">     <i class="icon-globe"></i>     <span class="notification-counter">1</span> </li> 

    .notification-container {     position: relative;     width: 16px;     height: 16px;     top: 15px;     left: 15px;      i {         color: #fff;     } }  .notification-counter {        position: absolute;     top: -2px;     left: 12px;      background-color: rgba(212, 19, 13, 1);     color: #fff;     border-radius: 3px;     padding: 1px 3px;     font: 8px Verdana; }     $counter .css({opacity: 0}) .text(val) .css({top: '-10px'}) .transition({top: '-2px', opacity: 1}) 

Animation with jQuery:

$('button').click(function() {     var $counter = $('.notification-counter')     var val = parseInt $counter.text();     val++;     $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500); }); 

It uses Font Awesome for the globe icon and jQuery Transit for the animation.