Gaist-Endruy
( off
)
(
08:29 01-09-2009
)
<script language="javascript" type="text/javascript"><br />
//<![CDATA[<br />
if (navigator.userAgent.indexOf('IE 5')!=-1)<br />
document.write('<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />');<br />
//]]><br />
</script>
Прикрепленный файл .txt:
скачать
(259b)
Gaist-Endruy
( off
)
(
08:29 01-09-2009
)
С помощью JavaScript определяем браузер пользователя и, если это IE5, вписываем в код страницы (с помощью того же скрипта) ссылку на CSS файл ie5.css.
Gaist-Endruy
( off
)
(
08:30 01-09-2009
)
#header {
width: 100%;
}
#rightmenu{
left: 80%;
}
Прикрепленный файл .txt:
скачать
(181b)
Gaist-Endruy
( off
)
(
08:30 01-09-2009
)
Согласно спецификации занимаемое CSS блоком по горизонтали пространство рассчитывается по формуле: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. При этом ширина содержимого (текста, рисунков, flash-объектов…) задана параметром width.
Gaist-Endruy
( off
)
(
08:30 01-09-2009
)
IE5 считает, что width определяет ширину всей видимой части блока (видимая часть - всё кроме margin), а на содержимое блока остается результат вычитания из width значений padding и border. Значит, надо указать ему неправильное значение width для всех блоков по формуле - занимаемое пространство минус margin-left минус margin-right.
Gaist-Endruy
( off
)
(
08:31 01-09-2009
)
Еще один баг - текст боковых меню «липнет» к краю блока. Видно, что сверху (по вертикали) отступ (padding) от границы блока до содержимого есть, а по горизонтали - нет. Свойственно это только боковым меню (причина, скорее всего, в абсолютном позиционировании этих CSS блоков), только для горизонтальных padding и только, если они указаны в процентах. Задаем отступы слева и справа для боковых меню в пикселях, десяти должно хватить.
Gaist-Endruy
( off
)
(
08:31 01-09-2009
)
Также на скриншоте видно, что левая и правая колонки наложены одна на другую. IE5 не обрабатывает свойство CSS right, с помощью которого мы позиционируем по горизонтали блок rightmenu. Приходится прописывать для него смещение уже слева на 80% (60+20 - почему именно столько, думаю, и так понятно).
Gaist-Endruy
( off
)
(
08:32 01-09-2009
)
CSS для печати страниц
Прикрепленный файл .gif:
скачать
(17.3Kb)
Gaist-Endruy
( off
)
(
08:32 01-09-2009
)
В макете указано два стиля для разных устройств отображения информации:
Gaist-Endruy
( off
)
(
08:32 01-09-2009
)
<link rel="stylesheet" type="text/css" media="screen" href="/style.css" /><br />
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
Прикрепленный файл .txt:
скачать
(155b)
)