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

Считайте это импровизацией на заданную тему, от автора поста.

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

Естественно, чем меньше правил, мы при этом нарушаем, тем лучше. Часто практикуемое применение JavaScript или expression для расширения возможностей горячо "любимого" браузера, в общем случае вряд ли целесообразно. С другой стороны (возможно, это не только моя фишка!?), желание обойтись простыми методами ведет к дополнительным стилевым правилам, включением в html-код страницы лишних контейнеров, но искусство требует жертв :)

Реализация заявленного в заголовке поста, основывается на озвученном мной приеме из предыдущей публикации. Собственно говоря, голая идея подверглась не значительной ревизии. Правда, использование border-а не самое лучшее решение. Проблема не только в том, что отсутствует возможность в применении относительных единиц измерения (%), но и в том, что это препятствует заданию фона body какой либо графикой, а при двух колоночном варианте шаблона в этом может возникнуть потребность.

Отказ от border-а в пользу margin, в какой-то мере позволяет справиться с этим.

Что реализовано в макете:

1. min-height, min/max-width для основных браузеров IE6(7), FF, OPERA, без использования JavaScript и expression для IE6
2. вывод контента, производится раньше боковых колонок, как в трех колоночном, так и двух колоночных вариантах, что является хорошим тоном при отсутствии стилей, если они по каким-то причинам не загрузились
3. легкий переход к разным вариантам шаблона

Проблемные моменты:

1. Отсутствует иллюзия одинаковой высоты колонок со своим background-ом для каждой из них и разделительными линиями (border-ом) между ними, что кому-то может показаться важным
2. Ограничения на размер графики и блоки с фиксированной шириной находящиеся в области контента, при уменьшении окна браузера, часть информации обрезается

Тестовая страница.

Тема эмуляции max-width и min-width в IE6, причем у одной и той же группы лиц, возникает снова и снова, словно осенне-весеннее обострение известной болезни. Не удержался от соблазна и я, не устоял, подался всеобщему безумию/психозу ;) Просто достало.

За основу взята публикация (момент три), с решением проблемы min-width, жаль, что, как стили, так и html весьма не аккуратны, но кто безгрешен?

Понятно, что ни о каких сриптах или expression речи не идет. Сделаем все на основе CSS.

Сначала для тех, кто понимает:

css

body {margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
}

html

<div class="trifler"> Контент </div>

Естественно, IE6 тут ничего не светит.

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

css

body {margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
}

* HTML .trifler {padding-left:680px;}
* HTML .gordi {height:0;}
* HTML .content {margin-left:-680px;position:relative;height:0;}

Комментарий:

* HTML .gordi {height:0;} – печальная необходимость, иначе эмулятор min-width не работает

html

<div class="trifler">
<div class="gordi">
<div class="content">
Контент
</div>
</div>
</div>

Итак, min-width в IE6 заработал. Но блок на всю ширину экрана, не хватает max-width.

Попытка использовать margin:0 auto; с дополнительными стилевыми правилами для IE6, требует указания размера width и наш выстраданный min-width накрывается медным тазиком ;)

Тем, кто с первой попытки догадался, каким образом от центровать блок и получить работающую эмуляцию max-width – 5 с плюсом.

Правильно, всемогущий border. Задавая соответствующую ширину правому и левому border-у и цвет фона body, получаем решение поставленной задачи.

css

body { background-color:#fff;margin:0;padding:0;}
.trifler {
  background-color:red;
  margin:0 auto;
  max-width:830px;
  min-width:680px;
 }

* HTML .trifler {padding-left:680px;border-left:86px #fff solid;border-right:86px #fff solid;}
* HTML .gordi {height:0;}
* HTML .content {margin-left:-680px;position:relative;height:0;}

html

<div class="trifler">
<div class="gordi">
<div class="content">
Контент
</div>
</div>
</div>

Было бы очень странным, если бы у этого приема не нашлась пара-тройка минусов:

1. Относительная сложность подбора ширины border-а с целью максимальной визуальной идентичности, решается переносом оного в основную секцию и убиением там max-width
2. С уменьшением размера окна браузера ширина border-а не уменьшается пропорционально, как в случае с margin:0 auto, а остается прежней, с чем в принципе можно смириться, идеальных решений не существует, увы…

Восторженные отзывы, аплодисменты плавно преходящие в бурные овации, суровая, возможно не лицеприятная критика в комментариях приветствуется :)

Строго по теме.

Реакция на высказанное в комментариях предложение/пожелание к посту - Подсветка строки таблицы hover_htc для IE6 и hover для FF, OPERA, IE7 по оформлению таблицы с подсветкой строк зеброй, а зебра она и в Африке зебра, была не слишком адекватной ;)

Естественно, возникло желание более основательно разобраться в этом вопросе. Скрипт - hover.htc, оставлен без изменений. Дело в том, что он рассчитан для работы, только с тегами html и усложнять его без нужды нет никакой необходимости. Обратимся к не менее мощному инструменту - "Каскадным таблицам стилей".

По складу характера, не принадлежу к категории людей любящих все раскладывать по полочкам. Не обладаю восточным менталитетом шлифовать какую-либо идею до совершенства, но если есть возможность сделать, что лучше, то почему бы и нет? Тем более, что необходимость в лишних телодвижениях отсутствует ;)

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

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

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

Но вернемся к заголовку публикации.

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

html

Рассмотрим лишь две строки.

class="t">
    <td class="tie">IE 6</td></tr>
  <tr>
    <td>Firefox 2</td></tr></table>

css

<style type="text/css">
* {margin:0;padding:0;}
body {text-align:center;}
h1 {font-size:16px;margin:0;}
.scroll {
  border:#000 1px solid;
  margin:0 2px;
  overflow:auto;
  height:130px;
}
.tb0 {
  background-color:#fff;
  border:#000 1px solid;
  margin:20px auto;
  width:455px;
}
.td0 {margin:0;text-align:center;padding:5px;}
.tb1 {
  background-color:#fff;
  font:bold 12px Arial;
  margin:0 2px;
  table-layout:fixed;
  width:428px;
}
.tb1 td {text-align:left;padding:0 0 0 7px;}
.tb2 {font:12px Arial;table-layout:fixed;width:100%;}
.tb2 tr {background-color:#ccc;color:green;cursor:pointer;}
.tb2 .t {background-color:#aaa;color:#000;}
.tb2 tr:hover,
.tb2 .t:hover {background-color:#ddd;color:red;}
.tb2 td {text-align:left;padding: 2px 0 2px 7px;}
</style>
<!--[if IE 6]>
<style type="text/css">
.tb1 td {padding:0;}
.tb2 {width:96.3%;}
.tb2 tr {behavior:url(hover.htc);}
.tb2 .trhover,
.tb2 .trhover td {background-color:#ddd;color:red;}
.tb2 .tie {background-color:#aaa;color:#000;)
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.tb2 {width:96.1%;}
</style>
<![endif]-->

Про комментируем:

Собственно, все сводится к тому, как заставить IE6 с минимальными затратами делать, то что мы пожелаем. Было бы гораздо проще создать класс для строки и использовать его, чередуя через строку, что и работает в FF, OPERA, IE7. Но в связи с особенностями скрипта hover.htc, упомянутыми выше, данный номер в IE6 не пройдет. Поэтому для него приходиться задействовать ячейку таблицы - td плюс класс .tie.

Как видно из кода, для FF, OPERA, IE7 в создании зебры и подсветки строки при наведении курсора принимают участие, в первом случае :hover наложенный на класс .t, во втором на строку - tr.

Для IE6 соответственно .tb2 .trhover td и .tb2 .trhover, спрятано в условные комментарии. Обратите внимание и не нарушайте для IE6, порядок следования стилевых правил.

Пример

Вот собственно и все.

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

Возможно, мы еще вернемся к этой теме. Но на сегодня одной проблемой стало меньше. Это не может не радовать ;)