li в несколько колонок - непонятный глюк

[Elflight]

Здравствуйте, товарищи! Помогите, пожалуйста, разрулить ситуацию: есть набор кнопок, мне нужно расположить их по три в ряд. Я верстаю их списком:

<ul class="buttons">
  <li><a href="#">Пенсионное обеспечение граждан</a></li>
  <li><a href="#">Социальная поддержка населения</a></li>
  <li><a href="#">Социальная поддержка семей с детьми, пожилых граждан и инвалидов</a></li>
  <li><a href="#">Социальная поддержка семей, имеющих детей</a></li>
  <li><a href="#">Адресная социальная помощь</a></li>
  <li><a href="#">Реабилитация и социальная адаптация инвалидов</a></li>
</ul>

.buttons {
    width: 980px;
    overflow: hidden;
}

.buttons li {
    width: 279px;
    height: 62px;
    background-color: blue;
    margin: 14px;
    float: left;
}

При этом, если .buttons не имеет свойства overflow, то кнопки висят в разнобой - одна висит сверху, вторая под ней, от этой второй как-то неуверенно начинается обтекание — полный бедлам, в общем. Если ставлю overflow:hidden или display:table, то кнопки выстраиваются ровно и правильно, но над ними образуется непонятное пустое пространство, как будто там еще одна невидимая кнопка висит... Такая ситуация в 5 популярных браузерах, так что можно сказать, везде. Подскажите пожалуйста, чем вызвано такое поведение и как его побороть?

[rilada]

Странно, я проверяю данный код и без overflow все нормально отображается. вот смотрите ссылка

Может это из-за других каких-нибудь свойств происходит?...

[Elflight]

Странно, я проверяю данный код и без overflow все нормально отображается. вот смотрите ссылка

Может это из-за других каких-нибудь свойств происходит?...

Да, убрал слайдер в шапке - стало нормально. Список не в шапке, шапка отделена <header></header>... Странно. Буду искать причину. Спасибо!

[Justnewone]

из <header></header> может что-то вываливаться и ломать горизонтальный список.