Unslider dots size appearing too large

Question

I am currently putting together a scrolling image gallery using the free unslider jquery code. I have implemented scrolling arrows and would just like to add dots to show the number of slides and slide location. I have set dots: true in the script.

Here is the result on the site: cjeffryes.comoj.com

As you can see my CSS is being applied to some degree, you can see that 2 of the slides have an outline with the third being solid, it just seems that the dots themselves are huge. The CSS decalres that the li dots should be 10x10px. Appreciate any help, here is my CSS:

.banner
{
position:absolute;
margin-top:100px;
}

.banner li
{
list-style: none;
min-height:256px;
min-width:960px;
overflow:auto;
float:left;
}

.banner ul
{
padding: 0;
margin: 0;

float:left;
}

.dots 
{
position: absolute;
left: 0;
right: 0;
bottom: 20px;
}

.dots li 
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff;
border-radius: 600px;

cursor: pointer;
opacity: .4;

-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}

.dots li.active
{
background: #fff;
opacity: 1;
}

Answer 1

1] You have the .banner li set to min-height:256px; min-width:960px;.

2] Just add min-height:none; and min-width:none; to your .dots li CSS declaration.

Change this:

.dots li 
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff;
border-radius: 600px;

cursor: pointer;
opacity: .4;

-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}

To this:

.dots li 
{
display: inline;
width: 10px;
height: 10px;
margin: 0 4px;

text-indent: -999em;

border: 2px solid #fff;
border-radius: 600px;

cursor: pointer;
opacity: .4;

-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;

min-height:none;
min-width:none;
}