title: Create page views using CSS
body: <p>I recently visited the website: <a href="http://www.cssmenusamples.com/" rel="nofollow noreferrer"><strong>CSS Menu Samples</strong></a></p>
  
  <p>I liked their pages method which is located on the bottom:</p>
  
  <p><img src="https://i.stack.imgur.com/l9qDy.jpg" alt="**Pages**"></p>
  
  <p>I have added what I found so far but it's not coming out correctly (especially in IE)</p>
  
  <p><strong>FireFox</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/FJ5aX.jpg" alt="FireFox"></p>
  
  <p><strong>IE</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/PuCkC.jpg" alt="IE"></p>
  
  <p>Here's my JSFiddle: <a href="http://jsfiddle.net/h82Nt/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navmeta"&gt;
      &lt;div class='wp-pagenavi'&gt;
          &lt;span class='pages'&gt;Page 1 of 48&lt;/span&gt;&lt;span class='current'&gt;1&lt;/span&gt;&lt;a href='http://www.cssmenusamples.com/page/2' class='page larger'&gt;2&lt;/a&gt;&lt;a href='http://www.cssmenusamples.com/page/3' class='page larger'&gt;3&lt;/a&gt;&lt;a href='http://www.cssmenusamples.com/page/4' class='page larger'&gt;4&lt;/a&gt;&lt;a href="http://www.cssmenusamples.com/page/2" class="nextpostslink"&gt;&amp;raquo;&lt;/a&gt;&lt;a href='http://www.cssmenusamples.com/page/10' class='larger page'&gt;10&lt;/a&gt;&lt;a href='http://www.cssmenusamples.com/page/20' class='larger page'&gt;20&lt;/a&gt;&lt;span class='extend'&gt;...&lt;/span&gt;&lt;a href='http://www.cssmenusamples.com/page/48' class='last'&gt;Last &amp;raquo;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wp-pagenavi{
      margin-left:auto !important;
      margin-right:auto !important;
  }
  .navmeta {
      clear:both;
      margin-top:30px;
      top:30px;
      padding:30px 0;
      padding-right:180px;
      text-align:right;
      padding-bottom:40px;
  
  
  }
  .wp-pagenavi a {
      padding: 8px;
      text-decoration: none;
      background: url(images/navi.gif) no-repeat center center;
      height:25px;
      color:#FFFFFF;
      width: 25px;
      border: 1px solid #000;
  }
  .navmeta .current {
      color:#FFFFFF;
  }
  .wp-pagenavi {
      padding: 10px 20px 10 !important;
      display:block !important;
      clear:both !important;
  }
  .wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
          color:#333333 !important;
          text-shadow:0px 1px #F6F6F6 !important;
          padding:6px 9px 6px 9px !important;
          border:solid 1px #B6B6B6 !important;
          box-shadow:0px 1px #EFEFEF !important;
          -moz-box-shadow:0px 1px #EFEFEF !important;
          -webkit-box-shadow:0px 1px #EFEFEF !important;
          background:#E6E6E6 !important;
          background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
          background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
          font-size:12px !important;
          margin-right:3px !important;
          text-decoration:none !important;
  }   
  .wp-pagenavi a:hover {
          color:#fff !important;
          text-shadow:0px 1px #4E802C !important;
          border-color:#478223 !important;
          background:#599F2F !important;
          background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F) !important;
          background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F)) !important;
          color:#FFFFFF !important;
          box-shadow:0px 1px #E7E7E7 !important;
          -moz-box-shadow:0px 1px #E7E7E7 !important;
          -webkit-box-shadow:0px 1px #E7E7E7 !important;
  
  }
   .wp-pagenavi span.current{
          padding:6px 9px 6px 9px !important;
          border:solid 1px #DCDCDC !important;
          color:#fff !important;
          box-shadow:0px 1px #E7E7E7 !important;
          -moz-box-shadow:0px 1px #E7E7E7 !important;
          -webkit-box-shadow:0px 1px #E7E7E7 !important;
          margin-right:3px !important;
          text-shadow:0px 1px #4E802C !important;
          border-color:#478223 !important;
          background:#599F2F !important;
          background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F) !important;
          background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F)) !important;
  }
  </code></pre>