Как я верстал C-Airlaid

Исходные изображения из заметке потерялись, но заметка сохранена для истории

Описание существующих проблем браузеров интересно, описание решений этих проблем интересно вдвойне, крики «маздай» ничего кроме зевоты не вызывают.

Данил Иванов, imfo.ru, вот здесь

Попробую для разнообразия последовать этому принципу и написать вдвойне интересную заметку. Расскажу-ка я о том, как я верстал airlaid.ru и с какими проблемами столкнулся. (Чёрт возьми, не могу не заметить, что с этими проблемами я не столкнулся в Опере.)

Вот такую штуку мне надо было получить:

airlaid-markup/result.gif Результат

Думаю, очевидно, что имеется в виду вёрстка в три колонки, т. е. ширина главного меню (и нижней плашки под копирайты) составляет 1/3 ширины окна; выравнивается и то, и другое посередене. Для простоты я решил делать колонки шириной 33%, 34% и 33% соответственно. Всякая шелуха вокруг нас интересует мало, поэтому рассмотрим упрощённый вариант задачи:

airlaid-markup/airlaid1.gif Упрощённый вариант

Итак, нам нужно сделать просто трёхколоночную вёрстку. Сложность здесь представляет (как оказалось) задача скругления краёв у синих плашек. cutДля начала я нарисовал 4 вот таких вот уголка для разных мест, антиалиаснутых на нужном синем фоне (восьмикратное увеличение by Photoshop):

airlaid-markup/corner.gif Такой вот уголок

Думаю, что вы в курсе, что клетки, закрашенные в шахматном порядке — это прозрачность?

Эти уголки были расставлены в нужные места вот так:

#main-menu  {
  position: relative; 
  left: 33%;  top: 0;  width: 34%;  height: 170px;
  background: #189CC0;
}
#menu-lc  {  position: absolute;  left: 0;  bottom: 0;  }
#menu-rc  {  position: absolute;  right: 0;  bottom: 0;  }

<div id="main-menu">
<img id="menu-lc" src="menu-lc.gif" alt="" />
<img id="menu-rc" src="menu-rc.gif" alt="" />
</div>

Аналогично была сделана и нижняя плашка. Несмотря на то, что вроде бы всё в порядке (всё же в порядке, да?), это не захотело правильно работать в IE и Gecko-браузерах. А именно: при некоторых значениях ширины окна браузера получались вот такие глюки:

airlaid-markup/bug-ie.gif Глюк в IE 6 при 1024 и 1600 пикселях

Internet Explorer 6.0, при 1024 и 1600 пикселях

airlaid-markup/bug-gecko.gif Глюк в Firefox 0.9.2 при 800 и 1024 пикселях

Mozilla Firefox 0.9.2, при 800 и 1024 пикселях

Забавно, что при ширине окна 800 пикселей IE показывал всё правильно, а FF отлично справлялся с вариантами 1152 и 1600. Целенаправленно я проверял только более-менее вероятные ширины окон, однако в обоих браузерах наблюдался такой эффект: при плавном изменении горизонтальных размеров окна глюк то появлялся, то исчезал в совершенно хаотичном порядке.

Я специально повторил эту вёрстку для «упрощенной задачи», причём вотнул стили прямо в HTML, чтобы интересующиеся могли не сильно напрягаясь посмотреть, что да как. Откройте это с помощью IE и/или Mozilla, поизменяйте размеры окна.

airlaid-markup/see-yourself Открыть!

Первая приходящая на ум вероятная причина глюка: проценты в разных местах округляются по разным правилам — где-то в сторону меньшего, а где-то — в сторону большего. Однако такое объяснению проходит только в случае с IE; обратите внимание, когда изменяешь ширину его окна, он то показываёт всё правильно, то показывает уголок на один пиксель левее, чем нужно. В Mozilla же происходит намного более интересный эффект: она иногда показывает всё правильно, иногда показывает уголок на один пиксель правее чем нужно, а иногда — на один пиксель левее. Чтобы не быть голословным, приведу конкретные цифры: при ширине 800 пикселей уголок сдвинут вправо (как на рисунке выше), при 814 всё отображается правильно, а при 828 пикселях уголок сдвинут влево (как на рисунке про IE). Объяснения такому глюку я уже придумать не смог.

Начал я пытаться эту проблему решать. Сначала я попробовал запихать оба нижних уголка меню в таблицу, сделать её шириной 100%, поместить в левую колонку левый уголок, написать там align=«left», а правую — в правый и написать align=«right». Но в результате получил ровно тот же самый эффект (вроде бы, в обоих браузерах). Тогда у меня появилась сумасшедшая мысль: позиционировать уголок в нужные места javaScript’ом. Вариация на эту тему: подставлять в right: иногда -1px, иногда 0, иногда 1px, в зависимости от резрешения и браузера. Так можно было бы сделать, чтобы в стандартных разрешениях всё работало OK. Но этого я даже не пытался делать — слишком уж уродливое решение.

В конце концов я придумал вариант, при котором задача решается, а уродливость её решения, скажем так, остаётся на допустимом уровне. Я сделал вот что:

#menu-rc  {  position: absolute;  right: -1px;  bottom: 0;  }

И нарисовал для этого места специальный вариант уголка (посмотреть на специальный вариант уголка). Аналогичный спецуголок был нарисован и для нижней плашки. Результаты вы можете увидеть на сайте airlaid.ru.

Внимательные товарищи заметят, что под Gecko глюк немножко остался, но это уже совсем мелочи. Причина этого глюка частично в том, что у Gecko, как я уже сказал, не два, а три варианта расположения уголка (-1px, 0 и 1px), а моё решение 100% лечит только от варианта с двумя расположениями, т. е. как IE.

В общем, такие дела.