Почему информация выводится поверх блока?

illmano

Старатель
Регистрация
20 Июн 2012
Сообщения
172
Реакции
14
Пытаюсь вставить социальные кнопки, но они почему-то выводятся не в блоке а поверх его. Не могу понять почему.
2013-11-21_20-52-28.png


Кто подскажет в чем ошибка?
Код можно посмотреть тут Для просмотра ссылки Войди или Зарегистрируйся

Просто не знаю какую часть кода сюда постить.
 
Код:
.social_bar {
    background: url("images/sb_body_bg.png") repeat-x scroll 0 0 #FFFFFF;
    border: 1px solid #86502F;
    border-radius: 5px;
    height: 20px; /*добавить*/
    margin-bottom: 0;
    margin-top: -30px;
    padding: 12px;
}
height: 20px; добавь
 
  • Заблокирован
  • #4
Тогда уж не 20px, а 24px - высота кнопок гугл плюс. Чтоб не заморачиваться можно сделать - "display:inline-block; " а вместо height:20px; размер задать padding. Он еще и float заменяет отчасти, только расположение по baseline у него, а не по верхнему краю.
 
Дело не в этом. Тут проблема с определением границ блока. По умолчанию блок руководствуется своими размерами, и не учитывает границы вложенных блоков. Чтобы все сделать "наоборот" и не указывать четкие размеры, можно воспользоваться, например, кроссбраузерным решением .clearfix (добавлять такой класс ко всем элементам, которые будут учитывать размеры вложенных элементов:(
HTML:
.clearfix{
    min-height: 0;
    *zoom: 1;
}
.clearfix:before,
.clearfix:after{
    content: " ";
    height: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    visibility: hidden;
    float :left;
}
Это мой взгляд на .clearfix. Он отличается большей совместимостью со старыми браузерами, чем у того же bootstrap а, и не выводит неожиданностей, когда content: "." задают так. Я использую пробел. Этого хватит-) Собственно.
 
Назад
Сверху