Что происходит в браузерах при Quirks Mode

Quirks Mode - это режим работы таких браузеров, как Internet Explorer (IE), Firefox и Opera. В принципе, Quirks Mode (также называемый режимом совместимости) означает, что относительно современный браузер преднамеренно имитирует многие ошибки в старых браузерах, в частности IE 4 и IE 5.
Цель Quirks Mode состоит в том, чтобы старые […]

Создание меню с помощью 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);
}
пример

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;
}