11февраля,
2009
«Они ползут на свет»!

Чем дальше, тем хуже.
Количество браузеров становится угрожающим. На данный момент уже, если хочется выпустить нормальный свёрстанный макет в свет, надо проверять его в целой куче браузеров, порождения типа http://browsershots.org/ не могут взяться из ниоткуда.

Как бы я не против развития технологий, обновлений и технических улучшений. Новые версии и браузеры занимают свои ниши, но старые уходят настолько медленно, что всё это превращается в абсурд.

Сейчас приходится тестировать свои макеты в:

  1. Mozilla Firefox 3
  2. Mozilla Firefox 2
  3. Google Chrome
  4. Internet Explorer 6
  5. Internet Explorer 7
  6. Internet Explorer 8
  7. Opera 9.2x
  8. Opera 9.63
  9. Apple Safari

Я уже плюнул пытаться добиться какой-то удобоваримости в IE 5.5 (чудесатое глючло, однако), не говоря уж о таких экзотических (пока) штуках, как Konqueror (кстати, хороший браузер), Amaya — вообще порождение машинных демонов.

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

И до сих пор остались пользователи с Mozilla Firefox 1.5, что действительно странно.

6января,
2009
Два фона, height: 100% и больше

Я продолбался битых 4 часа, пытаясь выяснить, что делать с двумя блоками, которые должны минимально занимать 100% высоты экрана, а также растягиваться свыше 100%, если контента больше. В общем, новые сутки я встретил в компании кучи запущенных браузеров, непослушных блоков, чашки кофе, от крепости которого глаза лезут на лоб и нежелания спать, пока проблема всё же не будет решена.

Как обычно, всё началось с того, что вылез баг в ие6. С данной проблемой я уже сталкивался, когда верстал макет Ecoorganic. Там проблема решалась проще, потому что блоку с фоном, лежащим под всем контентом, а также выступающим снизу, если текста на странице мало, можно было задать минимальную высоту в фиксированном значении. В этом же случае, мне надо было полностью не зависеть от содержимого и размера окна.
Сделав стандартный набор в css для html и body:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

я также прописал для html и body этакий «быстрый хак» — _height:100%;. Утверждают, что IE6 неправильно обрабатывает высоту, потому подобная запись на него действует, как свойство min-height для новых и нормальных браузеров. Однако, нет. Работает оно вообще не так, и точно не так, как хотелось бы.
Второй фон, который должен был занимать ширину и высоту поверх первого на 100%, я положил в div с классом:

<span>.layout {
text-align: left;
background: url(images/bck_ill.gif) center center;
width: 100%;
height: 100%;
min-height: 100%;
_height:100%;
}</span>

Вроде как во всех браузерах нормальное отображение, кроме Firefox 2, как ни странно. Внутри div-а с классом .layout находились блоки с float, что дало обычный в этих случаях результат — div сложился и контент вывалился из блока, образовав огромную дыру в пару экранов под футером сайта.
Естественно, что используют в этих случаях, я использовал для блока overflow: hidden;. Overflow отсёк лишнее, и блок занял нормальную высоту 100%, а также стал растягиваться по высоте контента за 100% высоты. Но в IE6 это выглядело совсем иначе: overflow:hidden; срезал всё, что ушло за высоту 100%, скроллбар стал неактивен. В общем, превышать содержимое страницы больше, чем один экран, стало невозможно.
Вот за решением этой проблемы и поиском, а также ползуясь методом тыка, я провёл ещё пару часов.
Ответ нашёлся весьма спонтанно. Убрав свойства min-height:100% у html и body и добавив .layout-у свойство display: table. Избавился везде от «быстрого хака» — _height:100%;.
Обработка свойств, назначенных html и body не требует указания минимальной величины, чтобы блок продолжал тянуться, он занимает всё пространство, которое занимает контент.
У блочного элемента с классом .layout указанное свойство min-height:100% для нормальных браузеров заставляет его растягиваться на 100%, а свойство display:table;, соответственно, заставляет блочный элемент вести себя, как табличный, что корректно работает и в IE6, и в остальных браузерах.

Окончательный код CSS:

<span>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}</span>

body {
 background: #FDF6DE url(images/bck.gif);
}
.layout {
 background: url(images/bck_ill.gif) center center;
 width: 100%;
 height: 100%;
 min-height: 100%;
 display: table;
}

Окончательный код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Some site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="inside.css" type="text/css">
</head>
<body>
<div class="layout">
Content
</div>
</body>
</html>

Этот вариант вёрстки был проверен в браузерах: Firefox 2, Firefox 3, Google Chrome, Safari for Windows, Safari for Mac, Opera 9.24, IE7, IE6 — везде отображается корректно.
HTML и CSS успешно прошли валидацию.

23ноября,
2008
Схлопывающийся div

В принципе, достаточно много об этом написано, найдено решение давно.
В CSS для блока, который не имеет фиксированной высоты и в нём находятся элементы с float, прописывается:

overflow: hidden;

Это свойство по какой-то причине заставляет блок растягиваться на высоту элементов содержащихся внутри. Однако, это свойство работает в IE6, если блоку указана ширина. Если таковой не имеется, то в этом несчастном браузере не происходит никаких положительных изменений. Можно указать блоку, конечно ширину, либо в процентах, либо жёстко фиксированную. Однако, если у блока есть margin или padding, а надо, чтобы блок был во всю ширину страницы, то результат не заставит себя ждать — блок уползёт за границы экрана и появится горизонтальный скролл.
Но решение всё же есть — свойство блока display. То, которое не понимает Mozilla Firefox (Mozilla Firefox 3 уже понимает), но понимает IE6 — display: inline-block;
Это свойство заставляет в IE6 блок растягивать на нужную ширину и высоту.
Чтобы избежать лишних ошибок в других браузерах, подобные детали стоит вынести в отдельный цсс, и при помощи conditional comments подключить это свойство.

P.S. Иногда всё-таки оно не срабатывает(что бывает крайне редко) и блок схлопывается, после обычной перезагрузки страницы, всё встаёт на свои места.