Задача: создать HTML-таблицу из трёх колонок шириной в 100px, 70% и 30% соответственно. Использовать или нет таблицы для вёрстки страниц — дело вкуса каждого верстальщика. Авторы сайта positioniseverything.com героически пытаются решить старую проблему: сверстать страницу в три колонки без помощи таблиц, при этом снова и снова натыкаясь на глюки браузеров. В то время как рядовые верстальщики со вздохом набирают <table>. Но даже такой годами испытанный инструмент, как таблица, иногда создаёт проблемы. Задача: создать таблицу из трёх колонок шириной в 100px, 70% и 30% соответственно. Все колонки должны иметь поля в 10px. Дополнительные условия: минимум HTML, максимум CSS. В тестировании участвуют Internet Explorer 6, Mozilla FireFox 1.5, Opera 8. CSS: HTML: Результат (1):
Во всех трёх браузерах ширина первой ячейки игнорируется, т. к. ужимается соседними колонками. Можно, конечно, поставить распорку, но мы ведь с Вами стремимся к минимализму в HTML, правильно? Тем более, что в запасе есть шикарное свойство CSS
Получаем (2):
Что за чертовщина? В Mozilla и Opera ширина первой колонки увеличилась на размер полей и составила 120px. Попробуем применить свойство
Не помогло (3):
Этот баг присутствует во всех трёх браузерах. В IE его можно побороть, выставив CSS: HTML: Выходит (4):
Всё? Почти. В Opera первая колонка всё-таки чуть шире установленного значения на пару пикселей. Я долго искал, откуда они могли появиться. Наконец нашёл виновника. Вы не поверите, им оказался не обнулённый HTML-атрибут CSS: HTML: Итоговый вариант (5):
Используйте на здоровье! Примечание автора сайта. Автор статьи рассматривает Internet Explorer 6 в Quirks mode. Если же у вас, как и у меня, указан DOCTYPE, приводящий IE в Standards compliance mode, то вам необходимо остановиться на варианте 2. Но при этом вам нужно учесть W3C box model и в CSS указать Хитовые статьи про разработку сайтов
Рассылка новостей и новых статей
Сообщения будут приходить пару раз в неделю, не чаще
Объявления |
Об авторе заметок
Примите участие
Некоторые мои проектыОбъявления |
© Александр Шуркаев, 2001–2024. Условия копирования и как стать автором. Если что, пишите на alshur@ya.ru. Осторожно, теги закрываются! |
|