css - Firefox does not align with right: as expected -

so have set of nav pills again, noticed odd issue. using right: 5px align "notification" want on mobile view, less 767 px. looks great in chrome, looks great in ie, in firefox both of "notification" spans positioned on top of each other off of li's. idea on why firefox having such odd behavior?

html

  <ul id="contentfirstmenu" class="nav nav-pills">     <li><a href="#">item 1 title</a><span class="notification">4</span></li>     <li><a href="#">item 2 title</a><span class="notification">0</span></li>     <li><a href="#">item 3 title</a></li>     <li><a href="#">item 4 title</a></li>   </ul> 

css

#contentcontainer {     padding: 20px 20px 50px 20px;     margin-left: 100px; }  #globalheader {     margin-bottom: 0; }  .notesdropdown > li {     border: 1px solid #ccc;     width: 132px;     height: 35px;     text-align: center; }  .notesdropdowninner {     text-align: left; }  .notesdropdown li:first-child {     border-radius: 5px 0 0 5px; }  .notesdropdown li:last-child {     border-radius: 0 5px 5px 0; }  .notesdropdown li:only-child {     border-radius: 5px; }  #contentfirstmenu li:first-child {     border-radius: 5px 5px 0 0; }  #contentfirstmenu li:last-child {     border-radius: 0 0 5px 5px; }  #contentfirstmenu li:only-child {     border-radius: 5px; }  #viewfulltext section {     margin-bottom: 10px; }  .notification {     color: #222;     position: absolute;     background: #fff;     line-height: 12px;     border: 1px solid #830600;     border-radius: 15px;     -webkit-border-radius: 10px;     -moz-border-radius: 10px;     font-weight: bold;     font-size: 12px;     -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);     -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);     padding: 2px 7px; }  .dropdown-menu {     min-width: 220px !important;     padding: 5px !important; }  .dropdown-toggle .caret {     border-top-color: #999 !important;     border-bottom-color: #999 !important; }  .notesdropdown li.open .caret, .notesdropdown li:hover .caret {     border-top-color: #fff !important;     border-bottom-color: #fff !important; }  #contentfirstmenu li.hover > a, #contentfirstmenu li:hover > a, #contentfirstmenu li.active > a, .notesdropdown li.open a, .notesdropdown li:hover {     color: #fff !important; }  #contentfirstmenu > li {     position: relative;     float: none !important;     width: 70px;     background-color: #eee;     border: 1px solid #aaa;     box-shadow: 0 2px 5px rgba(75, 75, 75, .5); }  #contentfirstmenu a:hover, #contentfirstmenu > .active > a, .notesdropdown a:hover, .notesdropdown > .open > {     background-color: transparent !important;     color: #fff !important; }  #contentfirstmenu {     color: #434343;     font-weight: bold;     font-size: 12px !important;     padding-top: 10px; }  #contentfirstmenu li:active, #contentfirstmenu li:hover, #contentfirstmenu li.active, .notesdropdown > li:hover, .notesdropdown li.open {     background-color: #434343; }    #contentcontainer div, #contentcontainer span, #contentcontainer textarea {     font-size: 12px;     color: #535353; }  #contentfirstmenu{     text-align: center !important;     z-index: 100;     position: fixed; }  @media screen , (min-width: 768px) {      #contentfirstmenu {         top: 25%;         margin-left: 10px;     }     #contentfirstmenu {         margin-top: 10px;         margin-bottom: 10px;     }     .notification {         left: 60px;         top: 40px;     } }  /* smartphone css */  @media screen , (max-width: 767px) {     #contentfirstmenu {         bottom: 5px;         display: table;         z-index: 100;         clear: both;         position: fixed;         text-align: center !important;         margin-left: 10px;         margin-right: 10px;         height: 45px;     }      #contentfirstmenu > li {         float: none !important;         display: table-cell !important;         width: 25%;         background-color: #eee;         border: 1px solid #aaa;         margin: auto -5px;         box-shadow: 0 2px 5px rgba(75, 75, 75, .5);     }      .notification {         top: -10px;         right: 5px;     }      #contentfirstmenu li:first-child {         border-radius: 5px 0 0 5px;     }      #contentfirstmenu li:last-child {         border-radius: 0 5px 5px 0;     }      #contentfirstmenu li:only-child {         border-radius: 5px;     }      #contentcontainer {         margin-left: auto;     } } 

js bin example

http://jsbin.com/ejetat/1/edit

i believe problem firefox understanding of table-cell display.

#contentfirstmenu > li { ...   display: table-cell !important; ... } 

try changing to:

  display: inline-block !important; 

i think firefox bit more fussy around structure of 'css tables' , not seem have table-row alternative, not tested, try wraping <ul> in <div>, give <div> display: table , give <ul> display: table-row

hope helps.