Слепые зоны у кнопок

[Mone]

Я кодер, а не верстальщик, но по воле судьбы приходится верстать. Вот возникла проблема у нас на сайтах (http://stranadobra.ru http://bysmile.by - впринципе, они одинаковы, разве что для разных стран). Браузер Chrome.

На картинке показаны некоторые из зон (уверен, что их больше даже на этой кнопке), нажимая на которые никаких действий не происходит. Разве что утапливание кнопки срабатывает (active), hover срабатывает, но ставка не делается. Тоже самое наблюдается на многих других кнопках на сайте.

За основу взят bootstrap + навешивал свои стили. Увидеть на практике, в принципе, можно лего: незалогиненным (чтобы не поставилась ставка) попробуйте отыскать эти зоны.

<button class="btn btn-do-bet" type="submit">СДЕЛАТЬ СТАВКУ</button>

.b-makeStaf .btn-do-bet {
    border: 1px solid #cc9f36;line-height:28px;height:28px;padding: 0 20px 0 35px;color: #222222;font-size: 12px;text-decoration: none;

    text-shadow: 0 1px 0 #ffe9b5;
    background: rgb(255,226,159); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,226,159,1) 0%, rgba(253,181,12,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,226,159,1)), color-stop(100%,rgba(253,181,12,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,226,159,1) 0%,rgba(253,181,12,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,226,159,1) 0%,rgba(253,181,12,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,226,159,1) 0%,rgba(253,181,12,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,226,159,1) 0%,rgba(253,181,12,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe29f', endColorstr='#fdb50c',GradientType=0 ); /* IE6-9 */
    -webkit-box-shadow:    0 1px 0 #999;
         -moz-box-shadow:     0 1px 0 #999;
              box-shadow: 0 1px 0 #999;
}


.b-makeStaf .btn-do-bet {
    padding: 1px 20px;
    float: left;
    font-weight: bold;
    font-size: 16px;
    height: 39px;
    line-height: 39px;
    text-transform: uppercase;
    color: #645532;
}

.b-makeStaf .btn-do-bet:hover, .b-makeStaf .btn-do-bet.hover {
    background: #FEC542;
}

.b-makeStaf .btn-do-bet.active,
.b-makeStaf .btn-do-bet:active {
    padding: 2px 19px 0px 21px;
}

.b-makeStaf .btn-do-bet.active,
.b-makeStaf .btn-do-bet:active {
    background-color: #fec542;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

В чем может быть проблема и как ее решить?

Заранее спасибо за советы по устранению проблемы.

Edited October 8, 2012 by Mone

[SelenIT]

В каком браузере такая бяка происходит? Не в IE, случаем?

[Mone]

Я хром использую. В других не пробовал, в принципе... Попробую.

[Radiocity]

Всё в хроме работает.

[lolka84]

Затверждаю, все ок в хроме

[Mone]

В мозиле и опере попробовал, вроде работает. У меня на рабочем компе, на компе у соседки, на компе у брата, дома на компе в хроме эти зоны есть. Они размером где-то в один пиксель идут и находятся на одной линии. Я примерно на картинке указал места... Видимо, особенности браузера... Такое ощущение, что зоны эти располагаются в углах прямоугольников букв.

Edited October 8, 2012 by Mone

[Mone]

Убрал утапливание кнопок через padding (чтобы при утапливании текст смещался на 1 пиксел вниз и вправо) и "слепые" зоны исчезли (на сайт еще не выливалось)... Видимо, когда попадаешь на границу элемента до нажатия, то при нажатии за счет смещения курсор оказывается на другом элементе и возникает такая проблема.