Pull to refresh

Comments 95

А можно использовать box-sizing: border-box; и не париться на счёт отступов и border.

Кстати, неплохо бы демку приложить.
UFO landed and left these words here
Всё тот же баг с min-height? Его, таки, собираются устранить в Fx17?!
UFO landed and left these words here
Я и не говорил что это будет в IE6 работать, я предложил вариант решения.
А в ТЗ написано IE6++. Зачем создавать лишние костыли?
Использовать незачем. Но заказчику бывает все-равно. Как то например: специфика товаров, которые продаются в интернет-магазине, предполагает то, что определенная часть людей достаточно «отсталая» в плане компьютерной образованности, а значит сомнительно что они обновляли браузер. Следовательно такие пользователи увидят кривой сайт. А из этого следует упущенная выгода. А зачем это заказчику?
Что ж, я попытался это объяснить маразмом клиента, но судя по вашему комментарию, дело в вас а не в заказчике. 1 (а то и меньше) процентом пользователей ie6 можно и нужно пренебречь, при этом сэкономив время и деньги, и получив чистый сайт. Пользователями ие7 можно пренебречь, так как последний браузер из ие которой обновляется в XP есть 8. Вот его придётся ещё некоторое время поддерживать, пока не закончиться поддержка windows xp в целом. Следуя этим простым правилам, можно сэкономить нервы, все остальные случае должны оплачиваться сверху. И вместе этих ваших догадок, лучше бы объяснили клиенту цену вопроса, а для юзеров вешали уведомление о устаревшем браузере и ссылками на скачку нового.

Порой мне кажется, что проблема с поддержкой браузеров появилась не из-за клиентов, а из-за разработчиков с такой идеологией, который хотят угодить всему миру. Почему вы тогда и линкс не поддерживаете, пару десятков юзеров в день с него тоже в инет выходят?
Поверьте, я вообще никогда не верстаю под IE6 если в этом нет надобности. Но Вы считаете в общем 1% пользователей на IE6. В целом картина такова. Но есть сайты на которых посетители с IE6 переваливают за 9%. А это значительная цифра с точки зрения бизнеса. Не смотрите на статистику, а посмотрите на это с точки зрения потерянных денег.
Вас, как разработчика не должно волновать сколько клиент потеряет денег. У вас есть, грубо говоря, прайс. В разработка по ie6 должна оплачиваться отдельно. Клиент дважды подумает, а стоит ли ему собственно эти 9%. И сколько из этих 9% боты и собственно сами разработчики. И то это всё применимо для сайтов интернет магазинов или платных сервисов, хотя если юзеры уже как-то осведомлены, странно, что они до сих пор используют ие6.
Так оно и оплачивается отдельно. Никто не говорит про бесплатно. И да, меня как разработчика интересует лояльность клиента, т. к. в след раз он обратиться ко мне, а не к тому, кто скажет: «Я под IE6 верстать не буду».

Более того, дабы не быть голословным, приведу цифры:
Специально открыл метрику и посмотрел один из сайтов. На 29 тыс. посетителей, приходится почти 1 тыс посетителей с IE6. Сайт кулинарной тематики.
*Сейчас за «обратиться» минусы посыпятся. Извиняюсь.
Ура, нам, граммар-наци, удалось запугать народ! Плюсую.
Окей, у вас грубо 3% ie6. А зачем обеспечивать такой же внешний вид как на других браузерах?
Это конечно небольшое издевательство, но мы в таких случаях редиректили на «лайт» версию сайта.
Заказчик больше денег потеряет на разработке под IE6, т.к. это весьма серьёзные траты (вплоть до утраивания бюджета проекта), если конечно вы не верстаете под IE за бесплатно.
А с самих же юзеров IE6 вы ничего не получите, т.к. у этих людей нет денег чтобы купить новый компьютер или банально нанять человека который им переустановит windows.
Вот это вы загнули. Втрое… Быть может где-то и будет втрое. А по поводу денег. Ген. директор компании в которой я работал не так давно, сидел на IE6 до того, как я это увидел. У него тоже денег нет?=)
Нет, он просто в интернете не был ни разу если может им пользоваться через IE6.
Вы что серьезно считаете «ни разу не был в интернете» разумным аргументом?=)
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
В моей прошлой конторе около 70 000 сотрудников по всему миру. До прошлого года, использование IE6 составляло 100%, в этом году свершилось чудо — перешли на IE7.
Корпоративный сектор. Он не так мал, и с ним, иногда, необходимо считаться.

Ну ведь сидели не просто так, а ради какого-то внутреннего корпоративного софта? )
Вот, это не значит что теперь для этих людей нужно весь инет адаптировать. Все эти люди работают с корпоративным софтом, а не сидят во всяких сервисах, им они не нужны на работе.
UFO landed and left these words here
Согласен с вами. По этой причине обычно локально заказывали 2 варианта web-приложений/сайтов — один для всех, с рюшками и плюшками, один — для внутреннего применения, с сохранением функционала, и пренебрежением дизайном.
Костыли это разработка под IE, а box-sizing это весьма удобное решение.
А разве при box-sizing не придется ставить статическую высоту? Мое решение предоставляет динамическое изменение высоты блоков в зависимости от размера контента, тогда как в вашем случае необходимо намертво ограничить высоту.
В таком случае, можно мне ссылку на описание применения данного способа без ограничения высоты блоков, либо описать здесь в нескольких словах?
Вы понимаете как работает box-sizing? Он лишь отменит прибавку padding и border к вашей абсолютной или точно заданной ширине\высоте.
В методе, описанном в данной статье, высота блоков не задается ни в каком виде, они увеличиваются одинаково вслед за увеличением контента. А при использовании box-sizing, мне необходимо указать высоту блоков, чтобы они были одинаковы, но когда контент превысит заданную высоту, то блоки опять станут разной высоты, либо контент обрежется/выйдет за границы блоков.
UFO landed and left these words here
Зачем же тогда использовать box-sizing, если, как я и описал в посте, можно padding применять к вложенным блокам (в которых находится текст).
UFO landed and left these words here
UFO landed and left these words here
Вся соль задачи такова, ведь не было бы проблемы, если нужно было все это сверстать под Chrome последней версии.
Спасибо за Демо. Примеров в моем посте крайне не хватает.
А вообще, по-моему это очевидное решение. Сколько ещё можно таких статей собственно писать на хабре? Давайте ещё начнём писать о 100% line-height и центрировании по вертикали, о min-height: 100% и прикреплённом футере.

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

В данном случае колонки .text_l и .text_r имеют разную высоту, поэтому в названии не помешало бы слово визуально.
Но также блоки:
имеют одинаковую высоту, но выстраиваются в отдельные колонки.
Но также блоки .text_container_l и .text_container_r имеют одинаковую высоту, но выстраиваются в отдельные колонки.

(извините, теги вставил, а их обрезало, не нашел как редактировать комментарии)
Это не смежные блоки, а вложенный один в другой, поэтому у них и одинаковая высота.
Вы правильно подметили, но здесь и так понятно о чем идет речь. И в любом случае оригинальное название поста проще найти в поиске.
UFO landed and left these words here
Простите, но это другой способ. При попытке решить эту задачу я в первую очередь пробовал применить его, но он оказался нерабочим и запутанным. Там используется position:relative, top, left для позиционирования блоков, в то время как у меня float и margin.
UFO landed and left these words here
С этим согласен, идея та же, исполнение немного другое. Но опять повторюсь: способ Чикуёнка у меня не сработал, даже когда я просто скопировал код из его примера.
В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и ебошат друг друга в квейк.

(c) neatkariga at lj

bash.im/quote/100001
<td> не умеет кроссбраузерный position: relative, а это может оказаться шилом в заднице.
Нет. <td> должен иметь display: table-cell.
Если отойти от тривиальной вёрстки, то с таблицами в этом случае проблем будет гораздо больше и хаков придётся писать ещё больше чем с div'ами.
то есть если поставить для td display:block, то это может в каком-то месте вылезти боком?
UFO landed and left these words here
UFO landed and left these words here
Тогда можно заюзать колонки через таблицы, использовав этот костыль и забив на IE6-7) Либо + костыль на js для динозавров. Как считаешь?
UFO landed and left these words here
Ну да, для Firefox выходит нужен отдельный костыль в виде злого хака), чтобы позиционирование в нём было от вложенного контейнера) Немного геморно, согласен :)

флексбоксы вообще чудо, но увыы, поддержка швах(
Просто на самом деле обидно, что из-за Firefox-а (заметь, не IE) обламывается CSS-таблица) Реально хоть и не для колонок (а что для колонок по сути?)), но способ был бы вполне рабочим и нормальным и без лишней разметки :)
Не могу точно сказать где, но в некоторых браузерах по счастливой случайности это срабатывало «нормально», и, в конечном итоге, придётся писать для ff, webkit и ie разный css.

Пожалуй это можно назвать «вылезти боком».
Да уж, способ конечно костыльный. Жаль что не пока «чистого» кроссбраузерного способа сделать данный функционал, хотя конечно есть таблицы, но у них есть свои минусы (например, задние высоты блока на всю ячейку).
Во Flexible box layout module, свойство box-align: stretch; (align-items: stretch;) призвано решить данную проблему, но оно пока ещё в ранней стадии поддержки, разве что firefox поддерживает с префиксами.
Жаль, но можно просто сверстать таблицей, правда это считается черновым способом, так как таблицы предназначены для вывода табличных данных. Просто условием этой задачки является не использовать таблиц ни в каком виде.
Даже если для вас habrahabr.ru/post/148327/#comment_5080729 не аргумент, то можем пойти дальше:

Теперь нам нужно позиционировать абсолютно блок скажем снизу справа от одной ячейки.

Решение на таблицах:
добавляем ещё одну строку после нужной ячейки высотой в 0px, добавляем ещё один столбец после ячейки шириной в 0px, в ячейке с шириной и высотой в 0px размещаем <div> с position: relative и от него уже делаем position: absolute.

Окей, разобрались.

Теперь нужно позиционировать на расстоянии 30% от низа ячейки какой-то блок.

Мы в заднице, поздравляю, т.е. решение на таблицах не даст возможности постепенно вносить минорные изменения — для каждого «чиха» придётся перефигачивать таблицу.

Есть одно главное условие — нивелировать side-effect. Его обычно принимают по-умолчанию.
На самом деле всю эту свистопляску с ячейками 1px * 1px можно заменить враперами таблицы, но закончится это сразу после воспоминаний о IE7 и его стэке z-index'ов.
Интересно, что об этих text_container_ вложенных друг в друга подумает поисковик, который придет индексировать сайт или верстальщик, который будет поддерживать такую верстку после автора, или сам автор через год, особенно, в случае с 4+ колонками.
Имхо, лучше на js сделать, он уже едва ли не на всех телефонах есть, не говоря о десктопах. С отключенным js, думаю, разная высота колонок будет не самым большим разочарованием пользователя :)
UFO landed and left these words here
В IE7 блоки разбегаются — чтобы не ползло, правильней будет использовать в следующем виде классы:

.text_container_l {
width: 50%;
float:left;
}
.text_container_r {
width: 100%;
float:left;
margin:0 0 0 100%;
*margin:0 0 0 50%; — по странным обстоятельствам при указании margin-left 100% блок уезжает вправо за родительский блок
}
.text_l {
float:left;
width:100%;
margin:0 0 0 -100%;
zoom: 1; — для отрицательных маргинов в IE7
position: relative; — для отрицательных маргинов в IE7
}
.text_r {
float:left;
}
Only those users with full accounts are able to leave comments. Log in, please.