Довольно-таки интересное решение: как дизайнерское, так и относительно верстки. Суть в том, что по краям видимой части у нас появляется некий бордер.


Мне показалось, что реализация и идея очень интересны Итак, начнем.

HTML код

Создаем 4 div элемента с уникальными ID (это вполне логично и естественно).

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

Теперь CSS для этих элементов. Заметьте, насколько CSS-код может быть красивым валидным. Некоторые свойства глобальный, а некоторые применяются для конкретного элемента. Это помогает избежать нагромождения кода.

#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

Надо сказать, что иерархичность очень способствует восприятию кода. Красивый код, согласитесь.

Вот такая вот незамысловатая идея реализация нестандартной идеи.

Совместимость браузеров

Да, конечно, IE6 как всегда выделяется из толпы. Иногда мне кажется, что разработчики сего чуда руководствовались правила “не будь как все, выделяйся из толпы”.

Как вы знаете, IE6 не знает что такое position:fixed. Я искал различные хаки и фиксы для этой версии браузера, но все они какие-то корявые. Итак, подумав немного меня осенила гениальная идея!

[if lte IE 6]>
<link href="ie6.css" type="text/css" rel="stylesheet" media="screen" />
< ![endif]

А в этом CSS’е мы напишем следующее:

#top, #bottom, #left, #right { display: none; }

Вот так-то. Пользуйтесь нормальными браузерами Это, возможно, неправильно, но другого выхода я не вижу.

Исходный код.