min-width для IE

Теги: css, верстка, браузеры, ie

Вот взялся немножко поверстать, причем сверстать надо резиновый макет, но с минимальной шириной, и при этом кроссбраузерный. Как известно, для этих целей в css существует селектор min-width. Беда только в том что он работает во всех браузерах ктоме Internet Explorer версий меньше 7. А такие до сих пор используются. Обратился за советом к Google - и ужоснулся!!! На что народ только не идет, как только не извращается! А я еще наивно полагал что в вебстроительстве я маньяк и извращенец!

Нет, мы пойдем другим путем! А путь прост до идиотизма! Надо чтобы наша страничка была не меньше, скажем, 800 пикселей? Давайте создадим невидимый блок указанной ширины, и пусть он нам подпирает эту страничку:

#minwidth{
	width:800px;
	z-index:1;
	height:0px;
	margin:0px;
	padding:0px;
	background:transparent;
	color:transparent;
}

Разжевать? Легко! Как я и сказал выше, мы создаем блок. Ширина этого блока равна минимальной ширине нашей странички. А теперь вся задача состоит в том чтобы скрыть этот блок от глаз пользователей. Для этого используем нулевые размеры и свойство z-index, что перемещает его на 1 слой по оси z(этакое псевдо-3D), что позволяет нам наслаивать его на другие блоки.

Сохраняем документ, смотрим в IE - все замечательно, блок теперь нужной ширины. Но косяк появляется в других браузерах. Они его существование игнорировать не хотят, и верстка начинает расползаться! Особенно Opera. Значит этот блок надо объявить только для IE.

См. Conditional comments. Теперь этот блок будет действать только в браузерах IE.

Вот и расперли страничку на нужную нам ширину.... Только вот незадача... в IE проявляется еще один баг! CSS-свойство width:100% работает абсолютно некорректно, так как считает не от размера страницы, а от размера окна. То есть уменьшаем размер окна браузера и все плывет :(
Распирать приходится каждый вложенный блок, причем указывать разную ширину для каждого, поэтому выносим свойство width в параметр style. А чтобы вообще избежать путаницы с блоками, этот способ лучше всего применять с табличной версткой, т.к табличные ячейки и сами таблицы растягиваются вполне нормально и адекватно.

Статьи схожей тематики:

Максимальная ширина элемента в Opera

CSS Nacked day

Верстка и прогресс

CSS-reset vs разум

Opera 9.52

Добавить комментарий

RSS сайта

и rss комментариев