Очень полезная вещь, особенно при вёрстке всевозможных кнопок. Вешаем на нужный блок класс inline:

.inline {
	display: -moz-inline-stack; /* FF2 */
	display: inline-block; /* good browsers */
}
 
*html .inline {
	overflow: hidden;
	zoom: 1;
	display: inline;
/* IE6 */}
 
*+html .inline {
	display: inline;
/* IE7 */}

Похожие статьи:

1. 10 CSS фишек, которые станут доступны после исчезновния IE6
2. Непростое CSS меню с использованием спрайтов

Вольный перевод статьи «10 Cool Things We’ll Be Able To Do Once IE6 Is Dead».

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

1. 1. Использование дочерних селекторов
   Не нужно больше использовать дополнительные стили для потомков, отменяющие предыдущие. С CSS2 правила применяются именно на дочерний элемент, а не на всех потомков.
2. 2. Полноценное использование 24-битных PNG
   С поддержкой альфа-каналов мы сможем (наконец-то!) использовать картинки с тенями и полупрозрачностью, не переживая за корректное отображение во всех браузерах.
3. 3. Селекторы атрибутов
   Отпадает нужда использовать классы для разных видов полей ввода, вроде <input class=»text» … />. Мы сможем можем стилизировать их, используя CSS2 — input[type="text"]. И даже делать выборку по значению атрибута (возможность из CSS3, поддерживается всеми современными браузерами, включая IE7)!
4. 4. Дополнительные свойства отображения
   Возможность использовать display:inline-block вместо плавающих блоков с последующем прерыванием потока clearfix‘ами или overflow:hidden.
   (Для Firefox используйте display:-moz-inline-stack;)
5. 5. Использование min-width and max-width
   Чистый CSS для задания граничных размеров блока. Никаких expressions!
6. 6. Избавление от 90% CSS хаков и причин для их использования
   Что тут сказать… у ИЕ6 много глюков рендеринга про которые мы сможем забыть :)
7. 7. Нормальное отображение аббревиатур (<abbr>)
8. 8. Предсказуемый z-index
   Никакой головной боли — почему слой X находится поверх слоя Y, когда должно быть наоборот? И мыслей, что сделали что-то не так… ан-нет! всё сделано правильно, это просто баги IE.
9. 9. Экономия времени и денег
10. 10. Получение удовольствия от своей работы :)

Но останутся 3 вещи, которые всё ещё нельзя использовать, пока не исчезнет IE7:

• CSS счётчики, добавляющие динамику
• Свойтво box-sizing, позволяющее выбирать блоковую модель
• Продвинутый javascript (только в IE8 есть кое-какие улучшения в скриптовом движке)

Вобщем, ждём скорейшего исчезновения недобраузеров!

Похожие статьи:

1. Резиновые кнопки с помощью button
2. Cufon или Typeface.js — что лучше?

«Никак», — быстрый ответ. А для особо любопытных — CSS Compatibility and Internet Explorer, объёмный документ из MSDN с громадным количеством сводных таблиц о поддерке IE5.0-IE8.0 тех или иных CSS селекторов, псевдоклассов…

Похожие статьи:

1. 10 CSS фишек, которые станут доступны после исчезновния IE6

Вёрстка сайтов не такое уж и сложное дело… если бы не одно НО, которое называется Internet Explorer :)

Проверять как выглядит сайт под разными версиями этого «браузера» довольно сложно. Кто пользуется веб-сервисами, кто standalone версиями, а кто и просто бегает к соседу с просьбой «а ну-ка открой свой седьмой»…знакомо?

С лёгкой подачи WebWorkerDaily представляю вам IETester — бесплатная утилита, которая облегчит нам жизнь. С помощью этого браузера вы сможете просматривать сайт в IE5.5, IE6, IE7 и IE8 beta1 !!!

UPD:
Программа хороша! но ещё немного сыроватая, о чем ниже…
В процессе тестов оказалось ей нужен 7-й IE для рендеринга страницы во всех заявленных версиях. На свой страх и риск таки поставил его (хотя до этого использовал IE6+PortableIE7). Даже рад этому — всё-таки седьмая версия сейчас «основная».
Пока что полёт нормальный, но случайным образом вылетает браузер — и самое интересное не понятно как лечить :). Практикую «вылетело-запустил заново» — и так до победы. Обычно хватает пару раз. Закономерности не заметил, но на оф.форуме пишут, что крашится при открытии IE6 в первой закладке… В принципе я доволен, а надежда на новые неглючные версии добавляет оптимизма :)

UPD2: Танцы с бубном показали, что открытие закладок в порядке убывания версий (8,7,6,5) добавляет стабильности :)
Во время недавней вёрстки интернет-магазина (а вы сами понимаете они не просты) особых нареканий не было, браузеры работали гладко. Жаль только отсутствует меню «открыть» — адрес подопытной странички приходится вставлять из буфера.
Из новенького — работают «conditional comments» для IE (хотя некоторые сомневались).

Похожие статьи:

1. Плагины под Firefox

С пылу с жару! Как я рад, что пофиксил немного «Facebox» (особенно учитывая мои слабые познания js)!!!
Суть проблемы проста — .png рамки непрозрачны в ИЕ :(
Для этого перепробовал кучу решений и остановился на Ifixpng, плагине для jQuery, который фиксит прозрачность. Качаем, подключаем скрипт и инициализируем его на страничке:

1
2
3
4

jQuery().ready(function(){
        $('a[rel*=facebox]').facebox();
        $('#facebox td').ifixpng();   < ------
});

Ура, уголки стали прозрачными! Но у нас появилась новая проблема — ifixpng не поддерживает CSS свойство «background-repeat», из-за чего некорректно ображаются рамки. Так что напильничком подрихтовываем стили facebox’а (facebox.css):

1
2
3
4
5

#facebox .b {
  background: #555;
  opacity: .70;
  filter: alpha(opacity=70); /* for IE6 support */
}

Теперь нам совсем не нужен файл "b.png" и с моего полупинка фейсбокс работает как и задумывал автор (которому, кстати, огромный респект)! Удачи!

Похожие статьи:

1. Facebox
2. Submit формы в новом окне
3. Непростое CSS меню с использованием спрайтов

После того, как Microsoft объявила (опять же), что они изменили способ обработки плагинов в Internet Explorer у веб-разработчиков добавилось проблем. Заключается она в том, что при вставке applet, object, или embed в HTML документ плагин не допустит взаимодействия с пользователем до тех пор, пока пользователь не нажмёт на него :(.

В случае с флеш плагином, это означает, что ваш ролик не будет проигрываться до тех пор, пока пользователь его не активизирует, кликнув на нём. К счастью, Micosoft предлагает довольно простой способ обойти это проблему — вставлять флеш, используя Javascript.

Итак…

SWFObject это небольшой Javascript файл, используемый для максимально лёгкой и валидной вставки флеш. Он помогает обойти дурацкую «защиту» в IE, работает во всех основных браузерах, дружит с поисковиками, вобщем мастхэв! Взгляните на демо-страничку скрипта.

В использовании предельно прост — подключаем файл swfobject.js и добавляем в код странички примерно такое:

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>
 
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Рассмотрим подробней каждую строчку кода:

Именно этот блок, будет заменён на ваш флеш контент, а текстовое содердимое ([...]) увидят поисковики(!!!).

Создаём флеш обьект:

var so = new SWFObject(swf, id, width, height, version, 
background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Где параметры:

• swf — путь к вашему swf файлу.
• id — ID тега object или embed
• width -ширина.
• height — высота.
• version — необходимая для проигрывания установленная версия флеш плагина.
• background-color — шестнадцатиричное значение цвета фона.
• quality — качество ролика, по умолчанию «high».

Непосредственно сама вставка флеш контента:
so.write("flashcontent");

Рассмотрим пример с дополнительными параметрами и использованием переменных:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", getQueryParamValue("variable3"));
   so.addVariable("variable4", getQueryParamValue("variable4"));
   so.write("flashcontent");
</script>

Указываем «низкое» качество проигрывания:

so.addParam("quality", "low");

Обязательно используйте для избежания проблем при наложении флеш поверх выпадающего меню:

so.addParam("wmode", "transparent");


Указываем значения нужных переменных:

so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");

Передаём переменные из строки запроса (http://www.example.com/page.html?variable3=value3&variable4=value4):

so.addVariable("variable3", getQueryParamValue("variable3"));
so.addVariable("variable4", getQueryParamValue("variable4"));

Вот и всё! Пользуйтесь на здоровье!

Похожие статьи:

1. Вставляем простой flash mp3 плеер на сайт

Ковырялся недавно с PNG в менюшке и пришлось перепробовать несколько решений. Приведу те, которые понравились.

• Хорошее решение, с пошаговой инструкцией. Кроме этого рассказано о проблеме с темноватым изображением и не работающими ссылками при использовании PNG в качестве фона в IE. Из «минусов» — нужно использовать дополнительный класс у картинки.
• На известном 24ways.org похожее решение, но без дополнительных классов CSS. Использую его.
• Вариант для любителей jQuery тоже не мог обойти стороной.
• И на закуску полезная статья по работе с PNG в Fireworks от SitePoint.

Похожие статьи:

1. Резиновые кнопки с помощью button
2. На заметку: кроссбраузерный CSS display: inline-block