Yusupov Tagir front-end developer

Все посты с тегом IE

2 comments

ie6 и проблемы с :hover

Как всем известно ie6 не поддерживает в полной мере псевдокласс :hover. Для решения этой проблемы есть массивный скрипт под названием Whatever:hover. Суть скрипта такова подключаем 1 раз в стилях и забываем о проблеме. Но как выяснилось не все так гладко, в некоторых случаях (закономерность я так и не уловил) у элементов при наведении в ie6 менялись некоторые стили, хотя :hover для них вообще никак не был прописан. Во всем виноват оказался как раз тот самый Whatever:hover. Так что я не советую использовать данный скрипт для решения проблемы в 6 ослике.

1 November 2009
2 comments

Учим CSS, псевдо-класс first-child

Просматривая работы отечественных верстальщиков заметил, что мало кто использует в css псевдо-класс first-child. Хотя это очень полезная штука, которая может хоть немножко, но облегчить работу программистам и упростить html код. С помощью данного псевдо-класса можно задавать стили для первого дочернего элемента.

Рассмотрим пример. Требуется реализовать подобную навигацию:

Example

Навигация реализуется в виде списка и для каждого элемента меню задается css свойство border-left. Но как видим выше у 1-го элемента не должно быть левого border'а. Первое, что приходит в голову добавить для 1-го элемента класс, но тогда на стороне сервера программисту вместо того чтобы просто сгенерировать меню, придеться искать еще и 1ый элемент и проставлять ему класс. Не будем мучить программиста :) Все легко реализуемо через псевдо-класс first-child.

  1. ul li:first-child {border: 0;}

Все работает во всех актуальных браузерах, кроме ie6. В нем это легко реализуется с помощью expression.

  1. *html ul li {border-left-width: expression(this.previousSibling==null?'0':'1px');}

Смотрим что получилось

14 May 2009
0 comments

Лишние отступы у кнопок в IE

Кнопки с дефолтными стиля в браузерах смотрятся достаточно не красиво. Поэтому дизайнеры обычно меняют размеры и семейства шрифтом, а также внутренние отступы у кнопок.
Рассмотрим пример:

  1. <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial;" value="Сохранить?" />

В IE появляются лишние отступы у кнопок:
кнопка
Исправляется этот баг CSS свойством overflow: visible

  1. <input type="button" style="padding: 3px 10px; font-size: 12px; font-family: Arial; overflow: visible;" value="Сохранить?" />
11 December 2008