Элемент верхнего пункта списка обрезается

Question

Я не могу понять, что делает мои элементы списка такими. Похоже, что элемент списка не занимает всю высоту ul, но я не могу понять, что делать, чтобы он работал правильно. Я попытался возиться с каждой комбинацией css, о которой я могу думать (маржа, отступы, отрицательный запас, определение высоты, плавающие элементы). Какие-либо предложения?

http://www.connectroot.com/directory/

---

Answer 1

просто использовать фон: не Фоновое изображение:

Это должно работать:

.filter { 
    display: inline-block; 
    color: #FFF; 
    font-size: 12px; 
    line-height: 15px; 
    border-radius: 10px; 
    padding: 10px 10px 5px 10px; 
    margin: 5px; 
    background: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%); 
    background: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%); 
    background: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%); 
    background: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%); 
    background: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(102,51,102) 100%); 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(0,0,0)), color-stop(1, rgb(102,51,102))); 
} 

Это позволит сделать текст выглядят немного странно но вы можете исправить это с помощью некоторого дополнения

padding: 5px 10px 5px 10px; 

Answer 2

проблема заключается в том, что вы расположили фон здесь

ul li { 
background-image: url('images/cr-bullet.png'); 
background-repeat: no-repeat; 
background-position: 0px 5px; //cause of the problem 
padding-left: 30px; 
margin-bottom: 15px; 
} 

удалить этот background-position: 0px 5px; и она должна быть решена

Или добавьте background-position: 0; к вашему .filter{ css }