CSS верстка. Отрицательные отступы и IE6.

Владимир | | CSS, HTML.

IE6 и отступыНедавно столкнулся с небольшой проблемой. Во время верстки сайта etutorials.simplecoding.org нужно было разместить два элемента так, чтобы они частично перекрывались. В обоих элементах в качестве фона используются картинки, поэтому разместить их нужно точно, иначе линии не совпадут.

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

Задача в общем-то простая и должна легко решаться с помощью CSS. Но разработчики IE6 так не считали.

Посмотрите на разметку этих блоков. Элементы просто размещены один за другим.

<div class="buttonContent"><a href="#">...</a></div>
<div class="buttonBottom"></div>
<div class="arrow">...</div>

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

Решается задача очень просто. Для блока arrow задается отрицательная верхняя граница и он «наползает» на buttonBottom.

.buttonBottom {
...
}

.arrow {
	...
	margin: -34px 0px 0px 150px;
}

Проблема возникла при тестировании страницы в шестой версии Internet Explorer'а. Это «чудо программерской мысли» рассчитывает отступы совершенно не так, как Firefox, Opera и даже IE7.

Если говорить конкретно, то для того, чтобы рисунки совпали, отступ в IE6 должен быть равен “-48px”.

Решить проблему удалось с помощью специального селектора:

* html .arrow {margin: -48px 0px 0px 150px;}

Этот код будет «виден» только IE6 и, может быть, более низким версиям (седьмая версия его игнорирует).

Кстати, я нашел множество примеров, в которых используется этот прием. Обычно его называют «Holly Hack» или «StarHtmlHack».

Удачных вам проектов!

Постовой

Хотите узнать как развивалась космонавтика? Тогда читайте космические хроники