TapazInDaNet

Искал для WopdPress'а темы, все как-то неказизсто и аляповато. И тут css-фид, как в воду глядел. Вот она, подборка наиприкольнейших тем, свободных для скачивания с themes.wordpress.net.
Читать полностью »

Как-то знакомый прислал ссылку на книгу Славы Курилова, с удовольствием прочитал. Весьма впечатлен.

По профессии — океанограф, по натуре — романтик, по призванию — гражданин Вселенной, Слава Курилов был в Советском Союзе объявлен невыездным, но смириться с этим не пожелал. В декабре 1974 года он бежал с туристского лайнера «Советский Союз» вблизи Филиппин. Без еды и питья, без морского снаряжения, оснащенный лишь маской, ластами и трубкой, он проплыл до филиппинского берега около ста километров, проведя в океане почти трое суток. О его пути к свободе эта книга, написанная им самим и увидевшая свет после его смерти.

Сделать разделитель (hr) того цвета, который нам нужен достаточно просто при помощи css. Об этом уже достаточно говорилось (хотя бы в Кулинарных рецептах Вебмаскона)

Обычно, если мне необходимо сделать разделитель красного цвета и высотой в один пиксель поступаю следующим образом:

hr {
    height:1px;
    border: 0 none;
    color:red;
    background-color:red;
}

Но, не все так прекрасно, как хотелось бы. Появляется отcтуп в IE, даже если обнулять margin и padding (правило хорошего тона, вначале css-документа обнулять отступы при помощи универсального селектора -*{margin:0; padding:0;} ) В других браузерах он выглядит нормально. Вот пример.

Откуда IE берет 7px сверху и снизу остается загадкой, как и то, что если попытаться побороть все это безобразие при помощи float, то снизу появится отступ в уже в два раза больше.

Странное поведение для строчного элемента, именно так IE определяет hr остается загадкой (по крайней мере для меня). Чтож, раз так ведет себя строчный элемент, то как выход прeобразовать блочный и избавимся от 7px :

hr {
    height:1px;
    border: 0 none;
    color:red;
    display:block;
    $margin:-7px 0;/*for all ie*/
    background-color:red;
}

О, вот и желаемый результат!
Конечно лучше воспользоваться conditional comments и вынести $margin:-7px 0; в отдельный стилевой файл для IE. Но, если не интересует валидность css, то можно обойтись и так.

Чтож, теперь все впорядке и работает в популярных браузерах.(Не проверялось в Safari и MacIE)