2 неразрешенные задачи: анимация блока и абсолютное позмционирование градиента

[Jackky]

http://4tab.pavelzheglov.ru/new/

Здесь 2 задачи, которые у меня не получилось решить:

1) Нужно сделать полоску градиента внизу текста, ни абсолютным позиционированием, ни псевдоклассом ::after сделать этого не получилось. Пример с кривой версткой, что бы было понятно, что нужно, здесь: http://4tab.pavelzheglov.ru/sample1.html

2) В панели с параметрами статьи (автор, комментарии, просмотры), есть скрытый span, который по задумке разъезжается при наведении (это чтобы можно было уместить больше такой информации). Корректно работает только в ФФ, Опере и ИЕ. Вебкит-браузеры добавляют какие-то странные отступы.

[mrnobody]

Вот ответ на первый вопрос.

Скрин:

p:before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: -webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
	background: -moz-linear-gradient(top, rgba(255,255,255,0), #fff);
	background: -o-linear-gradient(top, rgba(255,255,255,0), #fff);
	background: -ms-linear-gradient(top, rgba(255,255,255,0), #fff);
	background: linear-gradient(top, rgba(255,255,255,0), #fff);
}

Высоту маленькую задал, нужно около 10px—15px.

Edited August 3, 2012 by mrnobody

[Jackky]

Спасибо! Но разве такую конструкцию ИЕ 8+ понимает? Градиент я картинкой сделаю.

А, хотя, в принципе, фиг с ним! Главное, что в нормальных браузерах все как надо отображается! Большое спасибо! Теперь на повестке дня остался только вопрос по разъезжающимся блокам.

[mrnobody]

Теоретически должно работать в IE8+ .

А вот на счет второго вопроса, я так и не понял, у меня в Хроме все нормально раздвигается — как в Мозилле и Опере.

Edited August 3, 2012 by mrnobody

[Jackky]

Теоретически должно работать в IE8+ .

А вот на счет второго вопроса, я так и не понял, у меня в Хроме все нормально раздвигается — как в Мозилле и Опере.

Нет, в ИЕ 8 не работает

У меня версия Хрома последняя. Вот скриншот лишних отступов:

Аналогично в Макстоне и Сафари

[mrnobody]

Вот как в хроме

Версия 21.0.1180.60 m

[Jackky]

А в Макстоне и Сафари?

[mrnobody]

А в Макстоне и Сафари?

Ага, в Макстоне как у вас на скрине .

А Cафари не охота ставить

Edited August 3, 2012 by mrnobody

[Jackky]

Есть идеи как исправить? Несмотря на width равный 0, эти браузеры все равно воспринимают невидимый блок с его физической величиной. Если добавить display: none;, то при наведении исчезает эффект анимации.

[Jackky]

Сам дерзко решил проблему: добавил отрицательный letter-spasing span'у. Это в свою очередь добавило очень клевый эффект анимации. http://4tab.pavelzheglov.ru/