Если полупрозрачная png-картинка или фоновое изображение имеет 8-битный альфа-канал, он превращается в 1-битный во время действия фильтра, меняющего свойсто opacity. Пиксели с альфа-каналом прозрачности заливаются чёрным цветом.

Решение проблемы для слабых духом — мухи отдельно котлеты отдельно хранить следует. Меняем opacity для одного элемента, png-картинку/фон храним в другом элементе.

Другое решение подразумевает применение filter: AlphaImageLoader:

.element {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="file.png",sizingMethod="scale");
}

Но, не все знают, что работает и вот такой упрощённый вариант:

.element {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader();
}

Это поможет вам сильно не отвлекаться на поглаживания по головке и танцы с бубном вокруг священного животного :)

Аббревиатуры для ускоренного набирания CSS-свойств.

При создании сайтов с «резиновым» дизайном, нескольких колонок с текстом, везде, где есть необходимость задавать ширины элементов в процентах — технических дизайнеров мучил один очень неприятный баг Internet Explorer 6.

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

В итоге, при изменении размера видимой области сайта, сумма ширин становилась больше 100%, что приводило к прыгающим блокам.

Вообще, это проблема всех браузеров и каждый с ней «борется» по разному. Но, только у IE6 сумма ширин становиться больше ширины родительского блока.

Об актуальности проблемы говорит, хотя бы тот факт, что на сайте «Студия Артемия Лебедева» есть три(1, 2, 3) способа решения данной проблемы.

Решение

Хочу предложить свой, как мне кажется, более универсальный способ решения этой проблемы.

После многочисленных экспериментов, родилось решение.

Если вкратце, то пришлось отказаться от свойства float: left; и заменить его на display: inline-block;. Весь остальной код — это следствия этого изменения.


.columns {
width: 100%;
overflow: hidden; /* to hide horizontal scrollbar */
white-space: nowrap; /* disable inline blocks wrapping */
}
.column-1,
.column-2 {
display: inline-block; /* display columns as inline blocks */
vertical-align: top; /* vertical aligment to top */
}
.column-1 { width: 30%; background: #faa; }
.column-2 { width: 70%; background: #afa; }
.column-content {
padding: 1em;
white-space: normal; /* restore normal text wrapping inside */
}


Для Internet Explorer 6/7:


.column-1,
.column-2 {
display: inline; /* IE display: inline-block */
zoom: 1; /* emulation */
}


И html-код:

Тестировалось в следующих браузерах:

• Internet Explorer 6/7/8
• Mozilla Firefox 3
• Safari 4
• Google Chrome
• Opera 10

Сам фреймворк также обновился, новую версию можно скачать – http://code.google.com/p/css-framework/downloads/list

Интересует такой вопрос — используете ли вы это в реальных проектах? С высокой нагрузкой как оно справляется? Подводные камни?

В этой чудо-программе HTML рендерит не кто иной, как Microsoft Word.

CSS support in email clients

4 области с фоновым изображением уголков. Есть, что-то лучше?

Чтобы без js, динамические размеры, мало-мало лишнего кода, любой цвет для закругленного блока, любой цвет для бордеров закругленных, любая толщина для бордера, а?

Ищется решение, для включения в css-framework. Обсуждение идёт на форуме проекта.

Хочется, наконец, обобщить опыт и упростить понимание кода между большинством веб-разработчиков.

Клиент, радостный, хочет выложить фото своей новой собаки. Открывает свой сайт, создаёт статью, вставляет картинку выравнивает её по левому краю. Сохраняет, смотрит на сайт…. и о боже, у картинки нету отступов! Или наоборот, они есть с обоих сторон…

Задача

Приделать отступы к картинкам, которые обтекает текст. Для «левых» картинок отступ справа, для «правых» отступ слева.

Решение

Решение это CSS2

ХТМЛ-редактор клиента вставляет картинку с атрибутом align="чего то там...", ага…

/* Классы для картинок в http://css-framework.ru/ */

/* Images
------------------------------ */

#content img { padding: 5px; border: 1px solid #ccc; margin-top: .4em; }
img.f-left { margin-right: 1em; }
img.f-right { margin-left: 1em; }

Если бы не самизнаетекакой браузер под номером 6(номер 7 вроде получше, но не суть, хватает пока номера 6). Мы писали бы так:

img[@align='left'], img.f-left { margin-right: 1em; }
img[@align='right'], img.f-right { margin-left: 1em; }

Утопия… номер 6 портит картину маслом. На помощь приходит JavaScript(спасибо pepelsbey).

Есть много библиотек, у нас в примере jQuery. Этот код вставляется в head документа.

<script type="text/javascript">
$(document).ready(function(){
	$("img[@align='left']").addClass("f-left");
	$("img[@align='right']").addClass("f-right");
 });
</script>

Все довольны :)