Для тех у кого проблемы с CSS выражениями в firefox 2.0

dimsi · №1

В firefox 2.0 (возможно и в версиях >=1.0.7) выражения с тэгом A (#element A DIV {...} #element A.active DIV {...}) работают не корректно.
Короче "A" теперь не inline элемент, а непонятно кто, возможно и другие тэги пострадали, но с <A> проблема лечится втыканием внутрь A тэга SPAN.
<a href=...><span>.....</span></a>
Причем стили переписывать не надо, span все лечит.

Фокса не ругать, у Unix'оидов другого бровсера нет, а админы обязательно должны на Unix'е сидеть.

Lynn · №2

dimsi
Вы это к чему вообще?

dimsi · №3

К тому что fox'e 2.0 стал криво работать со стилями, то что работало в moziila1.0-Fox1.0.6, Opera6.0-9.0, IE4-IE7 работать перестало.
В частности вложенные в A не inline элементы в стилях теперь не обрабатываются.
Например стилевые меню http://www.realcoding.net/article/view/2731 работавшие в moziila1.0-Fox1.0.6
Кто с этим столкнулся, тот поймет про что речь.

Dark-Demon · №4

dimsi, RTFM. никакого DIV внутри A быть не может. если бы ты верстал правильно, таких проблем бы небыло.

вот такие вот чудеса иногда случаются, когда DIV суёшь внутрь A: http://dark-demon.nm.ru/web/samples/moz_margin_bug.htm

Lynn · №5

dimsi пишет

В частности вложенные в A не inline элементы в стилях теперь не обрабатываются.

А это что? http://dev.lynn.ru/_/a-div.xhtml

Выделить код

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title></title>
<style type="text/css">
a {
	color: red;
}
a div {
	color: blue;
	background: violet;
}
</style>
</head>
<body>
	<a href="#">
		red <div>blue</div> red
	</a>

</body>
</html>

dimsi · №6

Это из той же Oper'ы, что все страницы должны быть квадратные и каждому бровсеру свой стиль <смерть модемам - даеш страницы в 500K!>.
С такой политикой Mozill'у постигнет участь netscape, я предлагаю решения которые продлят жизнь хитрых страниц под mozill'у.

Dark-Demon · №7

Lynn, http://validator.w3.org/check?uri=http%3A%2F%2Fdev.lynn.ru%2F_%2Fa-div.xhtml
http://zvon.org/xxl/xhtmlReference/Output/Strict/el_a.html

dimsi, все страницы должны быть валидные.

Lynn · №8

Dark-Demon
Ну понятно, что валидироваться это не будет. Эта страничка служит опровержением процитированного выше утверждения.

dimsi · №9

Валидаторы не авторитет, они придуманны недавно, а страницы сделанны давно, завтра запретят растягивающиеся страницы TD width=4000 и в замен ничего. Политика "мы свой мы новый мир построим" ничего хорошего netscape не принесла (впомним LAYER и кардинальный отказ от него + последующий отказ WebMaster'ов что либо писать под перевертыша-netscape), ту то IE и вышел в люди, потому что политики не менял.

Dark-Demon · №10

Lynn, и в чём состоит опровержение? в том, что в одном конкретном случае это будет отображено правильно? вынужден тебя огорчить - браузеры еле справляются с отображением валидных вещей, а уж инвалидные они совсем вразнобой показывают. так что когда ты начнёшь дополнять стилями, где-нибудь из-за этого у тебя может поехать, и потом долго будешь искать причину...

dimsi, валидаторы, как и спецификации придуманы очень давно. впрочем совать DIV внутрь А никогда было нельзя, и применение такой техники является хаком, работоспособность которых никто не гарантирует.

Отредактировано Dark-Demon (07-11-2006 13:24:56)

Lynn · №11

Dark-Demon
Во-первых, я привёл то, что в математике называют контр-примером. Следовательно утверждение ложно. Возможно, если добавить какие-то ещё условия (например, что в a должно быть вложено три десятка блоков и всё это должно быть выравнено вправо), то утверждение станет истинным, но в том виде, в каком оно записано сейчас оно ложно.

так что когда ты начнёшь дополнять стилями, где-нибудь из-за этого у тебя может поехать, и потом долго будешь искать причину...

А я и не утверждаю, что всё будет хорошо. Я опровергаю утверждение о том, что „вложенные в A не inline элементы в стилях теперь не обрабатываются“.

Во-вторых, CSS, вообще говоря, никак не привязан к HTML, поэтому валидность HTML с точки зрения DTD здесь вообще не играет никакой роли. С помощь CSS можно оформить абстрактный XML-документ, в котором можно вкладывать div в a…

Dark-Demon · №12

Я опровергаю утверждение о том, что „вложенные в A не inline элементы в стилях теперь не обрабатываются“.

ой, сории-сори-сори :whiteflag:

Unghost · №13

==> Разработка

dimsi · №14

Я опять встряну, пример то забыл привести.
У меня лично была проблема такая:
Хотел чтоб кубик LI тоже подсвечивался и протыканность ссылки была видна на LI,
Как сделать такое по уставу не знаю.
Делал так: (работает в IE, Opera7-9, Mozilla1-FireFox1.0.6)
---
<style>
.myLink A { text-decoration: none }
.myLink :link LI, .myLink A:link { color: #000000 }
.myLink :active LI, .myLink A:active { color: #824EE1 }
.myLink :visited LI, .myLink A:visited { color: #000000 }
.myLink :hover LI, .myLink A:hover { color: red }
</style>

-----
В Mozilla 2.0 такой фокус перестал работать.

Вылечил методом:
<a href=./text2><span><li>link text2</li></span></a>

В чем неправ?

Dark-Demon · №15

<ul class=myLink type=square>
<a href=./text1><li>link text</li></a>
<a href=./text2><li>link text2</li></a>
</ul>

опять ты вставляешь блочный элемент в строчный.

<ul class=myLink type=square>
<li><a href=./text1>link text</a></li>
<li><a href=./text2>link text2</a></li>
</ul>

а для A задай display:block и растяни её на весь LI

dimsi · №16

Так кубики LI не подсвечиваются, или я непонял?
Тобиш буллеты должны иметь цвет сылки, link, visited, active, hover

Отредактировано dimsi (09-11-2006 19:39:52)

Dark-Demon · №17

dimsi, подсвечивай не LI а А.

dimsi · №18

Не понял. Код в студию.
Я <A> и подсвечиваю, тот кусок ".myLink :link LI" можно выкинуть, он не для этого бровсера.
Буллеты должны иметь цвета сылок.
Как это сделать не нарушая закона, и не теряя функциональности OL, UL списков.
--
Такое использование OL UL сплош и рядом, глупо выглядит когда ссылка меняет цвет, а буллет нет.

ragnaar · №19

Если уж на то пошло, то мне кажется что должно выглядеть так

Выделить код

Код:

<html>
<head>
<style>
.myLink A { text-decoration: none }

.myLink A:link,
.myLink LI:link { color: #000000 }

.myLink A:active,
.myLink LI:active { color: #824EE1 }

.myLink A:visited,
.myLink LI:visited { color: #000000 }

.myLink A:hover,
.myLink LI:hover { color: red }
</style>
</head>
<body>

<ul class="myLink" type="square">
  <li><a href=./text1>link text</a></li>
  <li><a href=./text2>link text2</a></li>
</ul>

</body>
</html>

В данном примере подсвечиваются и буллеты и код - правильный.
Претензии в данном случае не к Firefox, а как раз к IE, потому что именно IE не поддерживает псевдо-классы для других элементов кроме A.
Хотя если я не ошибаюсь в 7 версии его этому наконец-то научили

Al_H · №20

ragnaar
Я конечно прошу прощения, но код не вполне правильный. :link , :active и :visited применимы только ко ссылкам.
Скорее уж так:

Выделить код

Код:

<html>
<head>
<title> ... </title>
<style type="text/css">
<!--
.myLink a {text-decoration: none;}

.myLink a:link {color: #000000;}

.myLink a:active {color: #824EE1;}

.myLink a:visited {color: #000000;}

.myLink a:hover,
.myLink li:hover,
.myLink li:hover a {color: red;}
-->
</style>
</head>
<body>

<ul class="myLink" type="square">
  <li><a href=./text1>link text</a></li>
  <li><a href=./text2>link text2</a></li>
</ul>

</body>
</html>

ragnaar · №21

Al_H
Спасибо за поправку :beer:
Я не мудрствуя просто просто копировал один и тот же фрагмент

TLev · №22

а как же LoVe-HAte ?

Al_H · №23

LoVe-HAte работает, если Вы относитесь к active как авторы правила. Есть два варианта - active по наведению подсвечивается, или нет. Если Вас устраивает, что подсвечивается, Вы пишете link visited active hover. Если Вы считаете, что активный элемент и так уже активен, и подсвечиваться не должен, тогда - LoVe-HAte.

Dark-Demon · №24

Al_H, а что за любовная хата? я что-то пропустил?

Al_H · №25

Dark-Demon

я что-то пропустил?

Это известное правило, по первым буквам псевдоклассов
:link
o
:visited
e
:hover
:active
t
e
(кстати, hate - ненависть)
:link
:visited
:hover
:active
так :hover перекрывает :link, :visited, а :active перекрывает :hover. Это правильно в том смысле, что ссылки подсвечиваются по наведению, не только обычные, но и посещенные, но активные не подсвечиваются. Если Вы хотите, чтобы подсвечивались и активные, определение :hover нужно поставить последним, после :active.

Отредактировано Al_H (13-11-2006 17:02:16)

Полезная информация