Форум "Web-мастер"

Технологии web-програмирования

#0 VictorT © 12.03.07 12:56:09 - 21.03.07 12:57:20

Не хочет переопределятся стиль для <hr> в ИЕ

Переопределяю таким образом:

hr {
  background-image: url("../img/hr.png"); height:2px; border: none;
}

В ИЕ отображается стандартная линия. Как побороть?

#1 Kortez © 13.03.07 16:47:36

а если прописать uri от site_root /blabla/img/blabla.png
и без кавычек
и не png а gif

юзай TopStyle Pro

#2 VictorT © 13.03.07 17:00:56

Пока сделал вот так:

hr {
  background-image: url("../img/hr.png"); height:2px; border-style: none; outline-style: none;
}
* html hr {
  height: 4px;
}

Всё равно не то, что хотел, но решение получше пока не находится.

#3 VictorT © 13.03.07 17:26:15

> #1 Kortez ©
всё не в тему
> а если прописать uri от site_root /blabla/img/blabla.png
урл нормально работает.
> и без кавычек
по стандарту нужны
> и не png а gif
png тоже, как видишь, отбражается.
> юзай TopStyle Pro
попробовал, юзать не буду.

#4 VictorT © 14.03.07 11:23:04

Кстати, как выяснилось, ИЕ7 уже на хавает хак * html.
А какие существуют хаки для ИЕ7?

#5 VictorT © 17.03.07 12:27:28

Странно, что я раньше никогда не знал про conditional comment. Впрочем, раньше мне удавалось обходится без хаков.
Теперь делаю так:

<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Хоть и всё-равно хак, но всё-таки покрасивше.

#6 clickmaker © 18.03.07 13:26:57

hr {
  background: url(/img/hr.png) repeat-x center left;
  border: 0;
  clip:rect(5px 100% 7px 0); /* height = 2 */
  height: 10px;
  left: 0px;
  line-height: 10px;
  position: absolute;
  width: inherit;
  top: inherit;
}

#7 clickmaker © 18.03.07 14:18:07

кстати, div неплохо справляется с ролью hr
div.hr {
  height: 2px;
  background: #fff url(/img/hr.png) repeat-x scroll left;
}
div.hr hr {
  display: none;
}

<div class="hr"><hr /></div>

#8 VictorT © 19.03.07 09:36:05

> #6 clickmaker ©
при height: 2px; в ИЕ перестаёт работать.
> кстати, div неплохо справляется с ролью hr
хотелось бы сохранить семантику кода

#9 clickmaker © 19.03.07 10:57:33

> #8 VictorT © 19.03.07 12:36:05
>
> > #6 clickmaker ©
> при height: 2px; в ИЕ перестаёт работать.

там фактическая height задается разницей 7-5 в clip:rect

#10 VictorT © 21.03.07 12:45:04

> там фактическая height задается разницей 7-5 в clip:rect
Хм, не обратил внимание. Но теперь попробовал, этот вариант у меня вообще в ИЕ не работает.

А теперь другая проблема. Делаю hr для другого сайта, он выглядит несколько по другому, на семнтику пока забил. Делаю так:


div.hr {
  height: 1px; font-size: 1px; background-color: #3b3b3b; background-image: url("../images/title_underline_left.png"); background-repeat: repeat-y; background-position: 0px 0px;
}
div.hr div {
  height: 1px; font-size: 1px; background-image: url("../images/title_underline_right.png"); background-repeat: repeat-y; background-position: 100% 0px;
}

<div class="hr"><div></div></div>

В Опере и в Лисе работает нормально, а в ИЕ получается высота 2 пикселя, хотя должен быть один пиксель.

#11 VictorT © 21.03.07 12:57:20

> а в ИЕ получается высота 2 пикселя, хотя должен быть один пиксель.
Удалось пофиксить с помощью overflow: hidden;

Написать ответ