Высота блоков

[Aleksandr.L]

Помогите, пожалуйста, разобраться с проблемой. Дело в том, что есть 3 колонки с фиксированной высотой. Но почему-то Webkit'ы и Firefox отображают их по разному.

 

Firefox:

 

Webkit'ы:

 

Сама верстка: https://googledrive.com/host/0B6IlwqUO2fshQXYtM2dZWnNBVnM/

[npofopr]

Вы бы хоть кружочками, стрелочками разницу показали)

[Radiocity]

http://htmlbook.ru/css/min-height

Edited December 26, 2013 by Radiocity

[npofopr]

Не хватает им места, по тому и срезается.

[ryter]

проблема в inpuе:submit в ff и в chrome высота разная. Юзайте button с ним проблем меньше.

[Aleksandr.L]

проблема в inpuе:submit в ff и в chrome высота разная. Юзайте button с ним проблем меньше.

 

Пробовал button — безрезультатно.

 

Не хватает им места, по тому и срезается.

 

Уменьшал у второго и третьего блока отступы между параграфами — все равно в Webkit'aх по другому...

[Aleksandr.L]

Какая-то ерунда получается... IE тоже по своему отображает, плюс еще submit начал вести себя странно.

[Zverushka]

Для input submit нужно прописать box-sizing - content box

А вообще, если нужны одинаковые размеры - то либо скрипт equalHeight, equalizer - который фиксированно задаст им одинаковую высоту, либо в css задать примитвно как-нибудь, вроде min-height

У .mail убрать height - она обрезает низ первого столбца. Все обтекаемые элементы вернуть в поток через .clearfix  (не надо оверфлоу). Кстати не обязательно делать элемент обтекаемым - достаточно происать margin-left: auto; margin-right: 0; Ну и после этого остается разница в 2 пикселя или даже 1 - думаю это разница вызванная различиями рендеринга шрифвтов и как следствиям высоты линии - отстутпов...

 

Опять же для body не задан line-height (например, 1.2 - вот браузеры и бесятся - каждый свое рисует).

Edited December 26, 2013 by Zverushka

[Aleksandr.L]

Zverushka, спасибо! Частично помогло (https://googledrive.com/host/0B6IlwqUO2fshQXYtM2dZWnNBVnM/). Все время забываю для body задать line-height.

 

Все отступы измерял пиксель в пиксель — все равно не получалось сделать как на макете. Пришлось немного подгонять. Теперь не могу разобраться с конвертом, почему-то в Chrome он не до конца "наезжает" на форму.

[Aleksandr.L]

И еще хотел спросить...

 

Решил адаптировать верстку под свою мобилу (max-width: 320px), в браузере все отлично, а вот на телефоне — не очень. Логотип и меню сливаются в одну ссылку. Кнопки (ссылки) (Follow us, Visit blog) растягиваются на весь экран, с submit'ом все отлично — не растягивается. Может кто знает как это исправить?

 

 

Edited December 26, 2013 by Aleksandr.L

[Zverushka]

не вижу растянутых кнопок даже на скриншоте, с меню тоже не понятно - что за одна ссылка?
Конверт вроде тоже нормальный.

[Aleksandr.L]

Дак в браузере все отлично отображается, это в телефоне растягивается. В общем, логотоп и меню сливаются в одну ссылку, ну в смысле выделяются вместе, а не по отдельности. Скриншот просто с телефона не могу сделать.

 

На счет конверта — вот так выглядит в Firefox:

 

И вот так в Chrome (расстояние разное):

Edited December 26, 2013 by Aleksandr.L