Чудо{вищные} заметки

Новость одной строкой… Когда-то я рассказал как добавить border-spacing для IE используя свойство currentStyle.

Вчера, как многие знают, вышел IE8.Собственно на этом можно было бы многозначительно пост закончить…

В общем в IE8 более этот трюк не работает. В currentStyle не попадают неизвестные браузеру свойства. Изящного решения пока не нашёл – если уж пользовались им, то просто замените непонятные буквы в css на cellSpacing = <число> вместо вычислений, которые были раньше…

Update а вот переводная статья о других особенностях IE8

Поддамся стадному инстинкту и тоже оголюсь.

Присоединяйтесь.

Update: 06.11.08
ЕЩЁ раз обращаю внимание тех, кто бездумно скопирует и будет использовать приведённый рецепт (судя по количеству почитателей этого поста, сектантов культа Режь-Клей тьма) – если вам нужен border-spacing: 0, прочитайте ДО КОНЦА, а лучше сразу последнюю строчку.

Делюсь грязным хаком, для добавления поддержки border-spacing в IE. Собственно сам css:

table {
border-spacing: 50px; /* для всех кто в теме */
scrollbar-face-color: expression( runtimeStyle.scrollbarFaceColor = '#fff', cellSpacing = parseInt(currentStyle['border-spacing'])); /* угадайте кто?*/
}

Ну и пояснения: суть кода думаю ясна – вместо border-spacing, задать аналогичный cellspacing. Единственный (на мой взгляд) недостаток – считаю что border-spacing задан в px. Желающим поизвращаться поупражняться в переводе из других единиц – милости прошу.

Ну и вкратце о магический пассах, которые сплетены вокруг рабочего кода – они нужны для того чтобы expression выполнился ровно один раз (любопытным предлагаю заменить в вышепреведённом заклятье runtimeStyle… на alert(“Интересно как же часто я покажусь?”) ).

А за разъяснениями о runtimeStyle, currentStyle и разнице между ними отправляю к источнику сей мудрости – докладу о “тонком css” для IE с Client Side’2007.

Update: описанный хак нужен лишь в случае если border-spacing отличен от нуля, в противном случае используется border-collapse: collapse.

Update 20.03.2009 Почему перестало работать в IE8 ?

Нашёл (скомпилировал кучу чужих заметок по этому поводу) простой (и вроде кросс-браузерный) способ позиционирования блока известных размеров в центр окна браузера средствами css.

div.valign-center {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -300px;  //где 300 - половина высоты блока
   margin-left: -500px; // 500 - соответственно половина ширины этого блока
}

Задача по сути простая (сложнее когда размеры неизвестны), но всё равно стандартным решением всегда была таблица с кучей лишних ячеек по краям блока.
Отличие от других способов, которые удалось найти в интернете – предлагалось использовать в качестве половины размера использовать 25%, но я не нашёл у себя ни одного браузера, в котором бы это работало.

Technorati Tags: web, dev, css, center-vertically