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

Пришлось, как-то делать простую, обычную казалось бы вещь.

Скриншот

ТЗ проще не куда:

• Плавающая ширина всех колонок.
• Колонки равной высоты.
• Header и горизонтальное меню по ширине вровень с областью контента.
• Все блоки и колонки имеют индивидуальные по цвету - border и фоновую заливку.
• Сто процентная высота макета.

Так как метки-якоря в данном случае не предусмотрены, то для создания иллюзии одинаковой высоты колонок, принято решение использовать:

margin-bottom:-32767px;padding-bottom:32767px;

Тут надо сделать маленькое отступление.

Многие верстальщики предпочитают начинать верстку в самых продвинутых браузерах. У меня же несколько иной подход.

Все начинается в проблемных – IE6(7) и уж когда все доведено до ума, то просмотр в наиболее популярных и не значительная корректировка часто сводящаяся к переносу некоторых стилевых правил для IE6(7) в секцию хаков.

Единственным исключением является OPERA. Она в списке самая последняя и всегда жду от нее подвоха. Причем, мало что меняется от версии к версии, а это печально :(

Так случилось и на этот раз.

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

А вот поднять правую колонку на уровень header без пинка под зад "горячо" любимой OPER’е не удалось :)

Не привожу ни html-кода ни стилей.

На примерах все достаточно наглядно и убедительно показано и они говорят сами за себя.

Пример № 1 – в OPER’a бесконечная вертикальная прокрутка.

Пример № 2 - везде все в норме, если не считать погрешностей в интерпретации процентных величин различными браузерами.

Как часто бывает, приходиться возвращаться к тому, о чем ранее писал не только потому, что сменился парк браузеров, и хотелось бы в них проверить, как оно и что.

Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера Lasto на обновленные рельсы, в частности речь идет о предполагаемом апгрейде Gold Shop’a.

Само собой, никоим образом не бегу впереди паровоза, но...

Сегодняшняя публикация посвящена формам.

Писал об этом в "Элементы web-страниц. Форма поиска". Комментарии были не однозначными, хотя скриншоты приведенные там свидетельствуют, что формам на web-страницах не уделяется должного внимания.

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

Давайте посмотрим, что же необходимо, для приведения таких не послушных форм в божеский вид, в самых популярных браузерах.

Скриншот

html-код

<div id="forms">
  <form name="search">
    <input class="search" type="text">
    <input class="submit" type="submit" value="Найти">
  </form>
</div>

Стили

* {margin:0;padding:0;}
#forms {
  border:1px #000 solid;margin:7px 10px 7px;
  padding:4px;width:210px;
}
form {overflow:hidden;}
.search,.submit {
  background-color:#fff;border:1px #000 solid;float:left;
}
.search {padding:1px 2px 0;width:156px;height:17px;}
.submit {font-size:11px;margin-left:2px;width:45px;height:20px;}
/* Start hack Section */
/* hack for FireFox 3.5 */
@-moz-document url-prefix(){.submit {padding-bottom:3px;}}
/* hack for IE6 */
*html form {zoom:1;}
/* End hack Section */

#forms не является обязательным.

Обратите внимание на разные высоты у поля ввода и кнопки "Найти".

Для той же кнопки желательно всегда указывать размер шрифта.

Без hack’a для FF, надпись на кнопке будет смещена вниз, что портит общую картинку.

Вот собственно, необходимый и достаточный минимум для нормального, практически идеального, визуального отображения формы поиска на web-ресурсе.

Пример

   Нет, беспросветна эта тьма,
   Сбежали из шестой палаты...
   И сводят дружно WEB с ума,
   Маржины, падинги, флоаты.
   Зверинец браузеров - психов,
   По сути дела, та же масть...
   Ох, не будите братцы лихо,
   Легко в том омуте пропасть ;)
Gordi

Продолжим тему если не новой, то уж точно мало известной и недостаточно популярной техники создания колонок равной высоты.

В двух предыдущих публикациях посвященной этой теме, основной упор был сделан на макетах, в которых все колонки имели индивидуальный цветной border и разноцветную фоновую заливку.

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

Не много по игравшись и отложив поиск решения на потом, задался целью - исключить так ли уж необходимый border и использовать данный прием для макета "кирпич", как я его называю.

Посмотрим пару скриншотов:

Первый из коллекции прошлых статей покрасивше будет, но как уже говорил, здесь все колонки с фиксированной шириной, линки на обновленные примеры в конце статьи.

Второй, тема сегодняшнего поста.

По html-коду никаких различий не имеется, область контента "резиновая", не единственным недостатком, на мой взгляд, является, то обстоятельство, что все слито воедино. Нет четко очерченных границ между колонками.

Возможно это не принципиальный момент. На любителя, мои предпочтения склоняются к разметке на основе первого скриншота.

Кратко, о том, в чем же смысл предлагаемого.

  <div id="right">
    <div id="left">
      <div id="content">
        <div class="content">Content</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
      </div>
    </div>
  </div>

Вложенные друг в друга контейнеры с идентификаторами позиционируются соответствующим образом при помощи float и задают цвет нашим колонкам.

В контейнерах с классами, находится информация и блоки с ней с помощью float и относительного позиционирования размещаются там, где необходимо.

Как обычно, стараюсь представить своим читателям пять вариантов расположения колонок навигации относительно области контента.

Ссылки на примеры чуть ниже, но без разночтений при просмотре в различных браузерах, не обошлось.

При использовании данной техники придания иллюзии равной высоты колонкам макета, лучше всех ведут себя, вы будете удивлены – IE6(7).

Все пять вариантов работают в них отлично, как хорошие швейцарские часы.

В группу риска, как всегда попала "северная ведьма", иначе "норвежская красавица" :)

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

Примеры по скриншоту номер один:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right

Примеры по скриншоту номер два:

• left-content
• left-content-right
• left-right-content
• content-left-right
• content-right