На неделе Денис верстал сайт, в котором по идее дизайнера в контентной части идёт в ряд пять картинок с описанием. Сайт резиновый и должен масштабироваться до разрешения 1024х768. Каак оказалось, картинки не могут уместиться на одной строке на таком разрешении. Заказчик категорически против переноса блока с картинкой на следующую строку. Решили поместить картинки в таблицу table и задать картинкам стиль table img { width: 100% }. По идее они должны масштабироваться по ширине ячейки и уменьшаться на меньшем разрешении. Так конечно оно и есть, за исключением двух “но”: ИЕ6 и ИЕ7.

На удивление всеми любимый  ИЕ6 не хочет сужать картинки по ширине таблицы таким вот образом. Он просто даёт картинке её реальную ширину и растягивает ячейки таблицы до ширины картинки, в результате чего появляется горизонтальный скроллинг. Мало того, эту замечательную особенность унаследовал и ИЕ7.

Но ещё интересней то, что эту багу можно очень легко излечить (ну если знать как). Добавляем нашей таблице свойство table-layout: fixed и чудо! Кроссбраузерная таблица с резиновыми картинками! Правда нужно обязательно задать таблице ширину.

Чудобраузер последней версии от Microsoft до сих пор не понимает свойство CSS2 display:table-cell;

Кстати, CSS2 принят с 12 мая 1998 года. Прошло 12 лет, а суровым дядькам из MS всё не судьба сделать полную поддержку CSS2

Вот и анонсирована девятая версия Ослика. Всё конечно пока сырое и до совершенства в рамках Осла ещё далеко, а пока что обещают следующее:

• — более быстрый java-script движок
• — частичная поддержка CSS3
• — частичная поддержка HTML5
• — DOM2 и частично DOM3
• — поддержка SVG
• — DirectX рендеринга страниц

Полный списко изменения можно прочитать здесь.
Скачать и провести тест-драйв того, что уже наваяли дядьки из Майкрософта можно здесь.

Забавно что Майкрософт хвастается тем, что ИЕ проходит асид3 тест на 55%, в то время как остальные браузеры проходят его на 100%.

Кстати при тест-драйве в разделе “Graphics Demos” у демо “Falling Balls” в скачанном ИЕ9 у меня возникла ошибка жава-скрипта

Великий и ужасный Гугль успешно начал свою кампанию по отказу от всеми нелюбимого шестого ослика. С первого марта этого года прекратилась поддержка на Google Docs и Google Sites. Сегодня прекращается поддержка на YouTube и уже скоро исчезнет на Gmail и Google Calendar.

Сейчас IE6 занимает 20,99% рынка браузеров и этот показатель уже постоянно снижается. В Рунете с IE6 работает 9,3% пользователей.

Совсем скоро на мониторах страны

Одна хорошая, другая плохая.
Хорошая в том, что в IE9 будут скруглённые уголки и аппаратное 3D-ускорение. Плохая — будет IE9 :`(

В связи с некоторыми не очень приятными обстоятельствами (привет Дениска;) пришлось верстать один шаблон, в котором меню и задний фон всегда фиксированы, а контент может прокручиваться вниз. Всё бы ничего, но наш непобедимый шестой ослик отказывается понимать свойство position:fixed. В силу того, что контентный блок является position:relative, метод описанный в Техногрете Лебедева, где position:fixed заменяется на position:absolute нам не подходит. Но так как проблема бородата, как и сам ослик, то вот этот клиовый дядько слабал довольно простой жава-скриптик, который заставляет наш ослик менять блоку со свойствами position:absolute положение, когда происходят события scrollLeft или scrollTop.

Чудо-скрипт понимают ослики начиная с четвёртого. Сам скрипт можно скачать с сайта дядьки-разработчика. Поддерживается так же и позиционирование фона.

Как оказалось, CSS свойство margin:auto в IE7 центрует не совсем по центру. При такой центровке у сайта с пиксельным фоном, этот самый фон не сходился в один пиксель. И только в IE7. Проблема решается довольно просто: margin: auto заменяем на position:relative; left:50%; margin-left:-(width/2)px;

#all {
width:1000px;
position:relative;
left:50%;
margin-left:-500px;}


При использовании текста курсивом ИЕ6 увеличивает ширину блока с текстом, не смотря на то что она жёстко задана. Это иногда приводит к тому, что блочная вёрстка начинает ползти. Нашёл статью, в которой описана эта проблема.

На увеличение ширины  блока влияют: длина строки курсивного текста, семейство шрифта, выравнивание текста по ширине блока.Решается она добавлением блоку с текстом overflow:visible и hasLayout.

* html .textBlock { height:1%; overflow:visible; }