Create page views using CSS

Question

I recently visited the website: CSS Menu Samples

I liked their pages method which is located on the bottom:

**Pages**

I have added what I found so far but it's not coming out correctly (especially in IE)

FireFox:

FireFox

IE:

Here's my JSFiddle: JSFiddle

HTML:

<div class="navmeta">
    <div class='wp-pagenavi'>
        <span class='pages'>Page 1 of 48</span><span class='current'>1</span><a href='http://www.cssmenusamples.com/page/2' class='page larger'>2</a><a href='http://www.cssmenusamples.com/page/3' class='page larger'>3</a><a href='http://www.cssmenusamples.com/page/4' class='page larger'>4</a><a href="http://www.cssmenusamples.com/page/2" class="nextpostslink">&raquo;</a><a href='http://www.cssmenusamples.com/page/10' class='larger page'>10</a><a href='http://www.cssmenusamples.com/page/20' class='larger page'>20</a><span class='extend'>...</span><a href='http://www.cssmenusamples.com/page/48' class='last'>Last &raquo;</a>
    </div>
</div>

CSS:

.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;
}

your "JDfiddle"? It is "JSfiddle"... maybe you should edit that ;) — pattyd
– pattyd, Commented Jun 18, 2013 at 20:03
Thanks! Works flawlessly in FF but in IE is still the same issue — Si8
– Si8, Commented Jun 18, 2013 at 20:07
IE 8 doesn't support box-shadow, text-shadow and background with gradient — here's why it is not working. — Guilherme Oderdenge
– Guilherme Oderdenge, Commented Jun 18, 2013 at 20:08

Pete D · Accepted Answer · 2013-06-18 20:09:21Z

2

It doesn't work for IE because you have the prefixes for -moz- and -webkit- but you don't have code to support IE. if you go to this site and choose your gradient it will give you all the code including the code for IE.

answered Jun 18, 2013 at 20:09

Pete D

8376 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

G-Cyrillus · Accepted Answer · 2013-06-18 20:28:28Z

Your CSS is redundant. You can achieve this with one single class almost.

!important everywhere is useless and should not be used if you do not understand why you need them. :)

To set every thing on the same line: use vertical-align: for inline-element it is fine.

give size with line-height and a bit of padding, text will do the rest.

For IE and old browser , declare a background-color ,and for gradients, declare them as background-image.

http://jsfiddle.net/u7YHE/

    .navmeta {
    margin:40px auto;
    display:table;
}
.page.current {
    background: url(images/navi.gif) no-repeat center center;
    color:#FFFFFF;
    border:solid 1px #DCDCDC;
    box-shadow:0px 1px #E7E7E7;
    background-color:#599F2F;
    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));
    background:linear-gradient(top, #9FE355 1px, #79BF4A 1px, #599F2F);
    border-color:#478223;
}
.page {
    display:inline-block;
    vertical-align:top;
    color:#333333;
    text-shadow:0px 1px #F6F6F6;
    padding: 0.5em 1em;
    border:solid 1px #B6B6B6;
    box-shadow:0px 1px #EFEFEF;
    background:#E6E6E6;
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #FFFFFF), color-stop(0.02, #F3F3F3), color-stop(1, #E6E6E6));
    background:linear-gradient(top, #FFFFFF 1px, #F3F3F3 1px, #E6E6E6);
    font-size:12px;
    margin-right:3px;
    text-decoration:none;
}
a.page:hover {
    color:#fff;
    text-shadow:0px 1px #4E802C;
    border-color:#478223;
    background:#599F2F;
    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));
    box-shadow:0px 1px #E7E7E7 !important;
}

Collectives™ on Stack Overflow

Create page views using CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related