Глаза страшат, а руки делают

Блоки: IE via Mozilla
По горячим следам


По содержанию этот текст примыкает к моим советам-крошкам, но это уже не совсем крошка, поэтому я даю ему отдельную страницу.

В заметке я описываю и анализирую свои собственные недавние блуждания. Конечно, лучше всего учиться на собственных ошибках. Но и подробное рассмотрение чужих тоже может принести немалую пользу. Кроме того, для тестирования и исправления ошибок у меня спонтанно возникло что-то вроде методики. Поэтому я и взялся за этот этюд.

Наверно, всем новичкам знакома такая ситуация: скачав в интернете кучу разных навигаторов, приступают они к просмотру своих произведений. Волосы встают дыбом... Информации везде много, но так много, что свою проблему никак не отловить. А общие теории далеки, абстрактны, заумны и непонятны, пока сам на грабли не наступишь. И опускаются руки, и нервно зажмуриваются глаза при виде всяких мозилл, опер и нетскейпов. И самооправдание: да ведь я же для людей делаю, а они на ослах ездят...

Ой, как это всё знакомо, до последнего времени у меня и у самого нервишки пошаливали, когда я, скрепя сердце, заглядывал в Мозилле или Нетскейпе вот на эти самые странички со статьями.

Но давайте без нервов...

Вот так выглядели во всех «мозиллообразных» навигаторах мои статьи на этом сайте. Видите? Блок с основным контентом почему-то расширился вправо. А произошло это, как я теперь понял, из-за одной моей «хитрости».

На этих страницах я решил осваивать вёрстку на div'ах. И сразу возникла проблема: как сделать, чтобы вот этот левый серенький блок был всегда той же высоты, что и основной, с текстом? В таблицах-то это само собой делается. Можно, конечно, нарисовать серую полоску нужной ширины и задать background-position: left; background-repeat: repeat-y; а margin-left абзацного текста сделать равной ширине полоски (плюс 5—6 px для полей).

Ну а если без картинки?

И придумал я создать эту колонку из... левого бордюрчика текстового блока шириной в 150 px:

.content {
        position : absolute;
        top : 60px;
        left : 0px;
        width : 778px;
        background-color : #F8F8F8;
        border-right-style : solid;
        border-right-width : 1px;
        border-right-color : #6C6C6C;
        border-left-style : solid;
        border-left-width : 150px
        border-left-color : #CCC;
        border-top-style : solid;
        border-top-width : 1px;
        border-top-color : #CCC;
    }

Ширина 778 — это ширина всего блока, вместе с рамкой (т.е. на текст остаётся 778-150=628).

И вот я заподозрил, что «мозиллообразные» просмотрщики делают наоборот — выносят рамку «за скобки», и реальная ширина всего блока получается 778+150=928.

Общая мысль ясна. Нужно писать javascript, определяющий навигатор и выдающий поправку. Но наглядно экспериментировать на свёрстанной и оформленной странице было страшновато. И я сделал такую болванку:

Блок с красной рамкой — это аналог моего невидимого блока, который охватывает все остальные и позиционирует их по центру страницы. Кстати, сразу подброшу формулу такого центрирующего блока: он часто бывает нужен.

<div style="width: X; left: 50%; margin-left: -(X/2);">

Серый с толстой левой рамкой — это аналог блока, в котором написан тот текст, что Вы сейчас читаете. Вот код этой тестовой рамки:

<html>
<head>
    <title>Тест 1</title>
</head>
<body>
<div style="position: absolute; width: 600px; height: 300px; left: 50%;
margin-left: -300px; border: thin solid Red;">
    <div style="position: absolute; width: 600px; border: solid Gray;
border-left: 100px solid Gray; border-right: thin solid Gray; border-top:
thin solid Gray; border-bottom: thin solid Gray; height: 200px;">
ку-ку!</div>
</div>
</body>
</html>

Теперь под этой конструкцией поместим почти такую же, которая должна корректно выглядеть в Мозилле: ширина вложенного блока — не 600, а 500:

<div style="position: absolute; top: 320px; width: 600px; height: 300px;
left: 50%; margin-left: -300px; border: thin solid Red;">
    <div style="position: absolute; width: 500px; border: solid Gray;
border-left: 100px solid Gray; border-right: thin solid Gray; border-top:
thin solid Gray; border-bottom: thin solid Gray; height: 200px;">
ку-ку!</div>
</div>

Вот так это у нас выглядит: слева — в IE и Opera, справа — в Mozilla и Netscape (что и требовалось доказать):

***

А теперь попробуем обработать на совместимость верхнюю конструкцию.

В одном из предыдущих советов я уже показывал, как выводить разный текст в зависимости от типа браузера (см.).

Если на странице много таких мест, то можно в «голове» документа объявить короткие переменные, чтобы не выводить каждый раз всю функцию и длинные имена (особенно Осла Билловича Гейтса):


<script type="text/javascript">
<!--
var IE = (navigator.appName == "Microsoft Internet Explorer");
var OP= (navigator.appName == "Opera");
var NS= (navigator.appName == "Netscape");
//-->
</script>

Примечание: Mozilla реагирует на Netscape.

Если таких страниц много, то можно сохранить объявление в отдельный файл скрипта и ссылаться на него на каждой странице.

А теперь обработаем первую систему рамок. Мы уже выяснили, что IE и Opera показывают так, как нам надо, а для остальных нужна поправка. Поскольку в природе изредка встречаются и другие экзотические браузеры, мы не будем конкретизировать Мозиллу, а то они вообще ничего не прочитают. Итак, вместо тэга вложенного div'а введём следующее:

<script type="text/javascript">
if (IE || OP) {a = "600"}
else {a = "500"}

document.write ("<div style='position: absolute; width: " + a + "px;
border: solid Gray; border-left: 100px solid Gray; border-right: thin solid
Gray; border-top: thin solid Gray; border-bottom: thin solid Gray;
height: 200px;'>");
</script>

ку-ку!</div>

Примечание 1: Всё содержимое document.write() должно быть написано в одну строку, без перевода каретки.

Примечание 2: Поскольку строки, выводимые в document.write(), заключаются в кавычки — document.write("вот так"), — все двойные кавычки, используемые внутри тэга, должны быть заменены на одинарные.

Вот что теперь показывают Mozilla и Netscape:

***

Если Вы наблюдательны, то заметили, что в IE и Opera вложенная рамка выступает за пределы внешней на 1 px. Поэтому для них корректнее ввести в данном случае не 600, а 599.

А «методика», о которой я упомянул в самом начале, заключается в том, чтобы сначала решать хитрые задачи на таких примитивных болванках: не набрасываться сразу на сложное произведение, а поиграть гаммы и этюды. У меня есть специальная папка, в которой уже штук 40 таких этюдов.

***

Дополнение 2008 г.: В новой версии сайта, которую Вы сейчас видите, я вернулся к табличной вёрстке, точнее — смешанной (шапка сделана в блоках, а основная часть — в двухколоночной таблице). Поэкспериментировав, я пришёл к убеждению, что техника должна отвечать избранной форме. И нужно стараться выбирать такую технику, которая не требует дополнительных ухищрений.



 002103