Недавно столкнулся с небольшой проблемой. Во время верстки сайта 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».
Удачных вам проектов!
Постовой
Хотите узнать как развивалась космонавтика? Тогда читайте космические хроники
