Элемент выводится не по размеру, как подправить z-index?

Question

[chervonfunky]

Друзья на главной странице ohmybox.ru под слайдером есть бегунок с превьюшками
активный (черный квадрат который перемещается) он чуть шире блоков по которым перемещается и выходит за эти рамки

помогите исправить - не могу сообразить

PS
как альтернатива, подскажите, как вместо этого квадрата разместить картинку 150px на 150px, которая так бы перемещалась в зависимости отображаемого слайдера

заранее большое спасибо

Answer 1

[monochromer]

У списка .ei-slider-thumbs обнулить padding. Бордюр у пунктов реализовать черезborder, а не box-shadow, любо вычесть 1px из ширины пункта.

Comments

[chervonfunky]

нету паддинга ((((

не попадает в размеры блин(((
вот сам css

.ei-slider{
position: relative;
width: 100%;
max-width: 1920px;
height: 600px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
.ei-title{
position: absolute;
right: 20%;
margin-right: 15%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 95px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #f9e60e;
background-color:#000;


}
.ei-slider-thumbs{
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
bottom: 10px;
position: relative;
float: left;
height: 100%;
}
.ei-slider-thumbs li.ei-slider-element{
top: -10px;
left: 0px;
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
text-indent: -9000px;
background: #000;
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;

-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f9e60e;

}
.ei-slider-thumbs li img{
position: absolute;
bottom: 40px;
opacity: 50;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: 1;
bottom: 50px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}