Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

105 lines (89 sloc) 1.699 kB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagination Dots - Cross Browser Solution</title>
<!--
Pagination Dots
Andrew A. Lee - 2011
Cross browser approach, IE 6 +.
-->
<style>
body {
margin: 0;
padding: 0;
font: 11px/15px Arial, sans-serif;
}
ul,
ol,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
.pg-dot-panel {
padding: 17px;
background-color: #dedede;
border-style: solid;
border-width: 1px 0;
border-color: #fff transparent #999;
}
.pg-dots-row {
display: block;
height: 14px;
margin: 0;
text-align: center;
}
.pg-dot {
display: inline;
padding: 0 7px;
vertical-align: top;
}
.pg-dot a {
display: inline-block;
height: 14px;
width: 14px;
background-color: #aaa;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.pg-dot a:hover {
background-color: #fff
}
.pg-active {
cursor: default;
}
a.pg-active,
a.pg-active:hover {
background-color: #000;
}
/* IE 6, IE 7, and IE 8 */
.ltie9 .pg-dot a {
background: url(pg_dots.gif) no-repeat 0 0;
}
.ltie9 .pg-dot a:hover {
background-position: -32px 0;
}
.ltie9 a.pg-active,
.ltie9 a.pg-active:hover {
background-position: -16px 0;
}
</style>
</head>
<!--[if lt IE 9]><body class="ltie9"><![endif]-->
<!--[if IE 9]><!--><body><!--<![endif]-->
<body>
<div class="pg-dot-panel">
<ul class="pg-dots-row">
<li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#" class="pg-active">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li>
</ul>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.