Прокатиться на новой машиненке, скажу я вам, приятно во всех отношениях...

А у верстальщика под рукой, машиненок ого-ого...

Практически к каждой необходим свой особенный подход.

Вот и давайте устроим мини тест-драйв разметки центральной части макета, предложенной мной в предыдущей публикации.

За основу возьмем такой:

Делая скриншот в IE7, не проверял разметку в остальных браузерах. Дело даже не в самой разметке, с ней-то проблем никаких, а вот цветная вертикальная линия (border), являющаяся разделителем между левой колонкой и областью контента преподнесла сюрприз, да еще какой.

Ладно бы это относилось к семейству браузеров от Microsoft, так нет же…

Облажались FireFox 3.08 и Google Chrome. Пример смотреть в них, OPERA 9.64 и IE6(7, 8), SafariWin в норме.

Отчего, это происходит в толк взять, не могу, смена цвета одного вертикального border’а, ломает "крутые" браузеры, странно...

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

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

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

При разрешении экрана монитора в диапазоне от 1024*768 до 1280*ХХХ нарушение пропорций из-за плавающей ширины центральной части макета особо не напрягает.

Ограничен макет по min/max-width с эмуляцией для IE6 и ладно. Что там дальше, для многих, как бы и не важно.

Поднимал этот вопрос в "Не АК, но автомат...", будет и продолжение.

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

  .expand a{
    color:#960;display:block;
    text-decoration:underline;width:180px;
  }
  .expand a:hover{color:green;height:300px;}

 <div class="expand">
   <a href="#">Делаем колонку длиннее</a>
 </div&lgt;

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

Многие для проверки равной высоты колонок, используют скрипты, выводящие в колонки дополнительные порции текста.

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

Смотрим пример в оригинале.

Теперь добавим мою проверку и посмотрим в IE6. При наведении курсора мыши на "Делаем колонку длиннее" в правой колонке и увидев, что колонки взаправду имеют одинаковую высоту, уведя курсор в сторону, обнаружим, что в поджавшейся левой колонке, часть текста осталась снаружи.

Не буду комментировать, критиковать и пытаться исправить данную ситуацию, просто это демонстрация в подходах к правильному/не правильному тестированию web-страниц.

Кто-то может сказать, что подобного рода случай практически не реален, но это не так, все будет показано дальше.

Вернемся к нашей разметке.

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

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

Основой будет служить первый пример из этой статьи.

А вот он и сам, смотрим в IE6, попытка удлинить любую из колонок, оканчивается поломкой разметки.

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

Для IE6 пришлось внести в таблицу стилей такие дополнения:

 *html .middle,*html .middlesub {float:left; }
 *html .right {display:inline;height:1%;}

Про проценты не говорю, о них все сказано выше.

Обновленный пример.