Колонки одинаковой высоты.

Итак, задача сделать разметку в 3 колонки, при этом, чтобы колонки были равной высоты, вне зависимости от объема контента в каждой из них.
Основа трёх колонок
Исходный HTML:
<div class=”equal”>
<div id=”row” class=”row”>
<div class=”one”>
<h2>Контейнер</h2>
<p>…обычный параграф…</p>
</div>
<div class=”two”>
<h2>Другой контейнер</h2>
<p>…обычный параграф…</p>
<p>…другой обычный параграф…</p>
</div>
<div class=”three”>
<p>…отцентрированный по вертикали параграф…</p>
</div>
</div>
</div>
С помощью CSS сделаем так, чтобы этот набор блоков отображался как таблица:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row […]

Как создать стили только для IE

Всем известно что браузеры IE некоректно работают с CSS. Мало того, у них у всех разные ошибки, ошибки которые сть в одной версии, отсутствуют в другой. Для создание стилей IE есть несколько методов: условные комментарии (Conditional Comments) и css хаки. Лично я отдаю предпочтение условным комментария.
Различные таблици стилей, для различных версий […]

Создание меню с помощью CSS

Создаем меню
исходный HTML:<ul class=”menu”>
<li><a class=”home” href=”#”></a></li>
<li><a class=”blog” href=”#”></a></li>
<li><a class=”autor” href=”#”></a></li>
</ul>
Изображения кнопок в двух состояних:

Для того,чтобы избежать моргания изображений, связаное с загрузкой изображения, обьеденим два состояния кнопки в один файл:

Преврашаем наши ссылки в кнопки:*{
margin:0;
padding:0;
}
.menu{
list-type-style:none;
}
.menu li,.menu a{
width:114px;
height:36px
}
.menu a{
display:block;
background-repeat:no-repeat;
background-position: 0 0;
}
.menu a:hover{
background-position:0 -36px;
}
.menu .home{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-home.gif);
}
.menu .blog{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-blog.gif);
}
.menu .autor{
background-image:url(http://neveragainblog.com.ua/examples/menu/menu-avtor.gif);
}
пример

Подключение таблиц стилей для браузеров IE, Opera, Safari

Иногда бывает необходимо для достижения кроссбраузерности определить разные стили элемента для различных браузеров. Можно пойти в сторону использования css хаков, но я хочу описать альтернативній вариант, как мне кажется более правильный.
Итак, для IE используем всем знакомые сonditional сomments <!–[if IE ]>
<link rel=”stylesheet” type=”text/css” href=”style/ie.css” />
<![endif]–>
Для Opera <script type=”text/javascript”>
<!–
if(window.opera) {document.write(’<link rel=”stylesheet” type=”text/css” href=”style/opera.css” />’);}
//–>
</script>
Для Safari […]

PNG24 в IE

Использование фильтра AlphaImageLoader

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

sizingMethod может принимать несколько значений:

crop - изображение обрезаеться под размеры блока;
image - блок принимает размеры изображения;
scale - изображение маштабируеться под размеры блока.

При использовании этого метода есть определённые особенности:

у элемента должны быть заданы height или width;
это не бекграунд,поэтому таких свойств как background-position, background-repeat, background-attachment просто нет.

При использовании ссылок и данного метода советую […]

3px при использовании float в IE

Все наверно сталкивались с проблемой лишних 3 пикселей при использовании обтекания в ие. Лично я от этого избавляюсь так:

.left{
float:left;
}
* html .right{
position:relative;
left:-3px;
margin-right:-3px;
}