Выделение строки таблицы картинкой

[Provodnik]

Добрый день

Уже вторые сутки сижу, пытаюсь отыскать подходящий мне скрипт.

Задача стоит следующей:

Нужно двухуровневое вертикально меню, строки которого при наведении курсора будут выделять заданной картинкой на полную длину

Один из наиболее подходящих вариантов нашел на данной странице:

http://www.html-books.net/js/menu/11.php

Но: в ие и опере длина строчки отображается как заданная, в фф - обрамляет текст

Попробовал подобрать другие решения - вышел на эту же проблему.

Вот простейший аналогичный отрезок кода:

#navlink {background: #FFFFFF; color:#777777; width: 183px; height: 100%; }
 #navlink:hover {width:183px; background-image:url('string.png'); color:white; text-decoration: none; }

<a href='#' id='navlink' style="width:183px;">probe</a>

в ие выделяется строка в 183 пикселя, в фф - только слово "probe"

Во-первых интересует решение для моей задачи, а во-вторых просто интересно, почему не работает конкретный пример. Пробовал его и в <p> и в <td> c фиксированной шириной вставлять - и нифига

Заранее спасибо за ответы : )

[Vlad]

Доктайп стоит строгий?

[Provodnik]

Если поставить строгий или переходный (да собственно любой из возможных) в ие тоже перестает работать

Я о нем забыл, его просто не было. Вот теперь ситуация для браузеров равная

[Vlad]

Ссылки это встроенный элемент, для него не действует ширина и высота. Надо поставить display: block.

[Provodnik]

Спасибо большое )

Вопрос решен

[Provodnik]

а касательно данного примера - можно как-то средствами html-css зафиксировать подсветку картинкой элемента первого уровня списка

т.е. имеем меню:

первый уровень

-под уровень 1

-под уровень 2

При щелчке по "первый уровень" меню раскрывается, выделение hover при этом пропадает. Зафиксировать его вплоть до переключения на другой уровень или перехода по ссылке без помощи скрипта можно?

[Vlad]

Можно если делать меню через ul-li, ховером выделять тогда надо будет список первого уровня.

[Provodnik]

 #navlink {background: #FFFFFF; color:#777777; width: 183px; height: 100%; }
 #navlink:hover {width:183px; background-image:url('http://fv.ucoz.com/design/string.png'); color:white; text-decoration: none; }
 #navlink:active {width:183px; background-image:url('http://fv.ucoz.com/design/string.png'); color:white; text-decoration: none; }


<ul>
	<li><a href='#' id='navlink'>nnnnnn</a></li>
		<ul>
			<li><a href='#' id='navlink'>nnnnnn</a></li>
			<li><a href='#' id='navlink'>nnnnnn</a></li>
		</ul>
	 <li><a href='#' id='navlink'>nnnnnn</a></li>
	 <li id='navlink'>nnnnnn</li>
</ul>

не фиксируется, что упустил? примерно представляю конструкцию с множеством onmouse over-out, но это перебор

вернее я кажется не сделал ничего, чтобы он фиксировался, что значит выделять ховером? дополнительный атрибут?

Edited December 5, 2010 by Provodnik

[Vlad]

id='navlink' надо заменить на class, идентификатор в коде страницы должен быть только один.

Надо hover не к ссылке применять, а к li верхнего уровня. Тогда стиль для вложенных списков будет li:hover ul

[Provodnik]

li.navlink {background: #FFFFFF; color:#777777; width: 183px; height: 100%; }
li.navlink:hover {width:183px; background-image:url('http://fv.ucoz.com/design/string.png'); color:white; text-decoration: none; }
li.navlink:active {width:183px; background-image:url('http://fv.ucoz.com/design/string.png'); color:white; text-decoration: none; }

<ul>
  <li class='navlink'><a href='#'>nnnnnn</a></li>
	 <ul>
	   <li><a href='#'>nnnnnn</a></li>
	   <li><a href='#'>nnnnnn</a></li>
	  </ul>
   <li class='navlink'><a href='#'>nnnnnn</a></l[/b]i>
</ul>

подсвечивается, но не фиксируется

Edited December 5, 2010 by Provodnik

[Vlad]

Должно быть вот так, чтобы вложенный ul принадлежал первому li.

<ul>

<li class='navlink'><a href='#'>nnnnnn</a>

<ul>

<li><a href='#'>nnnnnn</a></li>

<li><a href='#'>nnnnnn</a></li>

</ul>

</li>

<li class='navlink'><a href='#'>nnnnnn</a></li>

</ul>

[Provodnik]

получается что подсвечивается первый уровень и вложенный уровень, ничего не фиксируется

чтобы не описывать абстрактно - вот собственно объект работы http://fv.ucoz.com/index/test/0-4. Ссылки раскрываются и фокус теряется. Мне нужно чтобы пока был раскрыт подуровень подсвечивался первый уровень

возможно я некорректно объяснил что хочу получить - вот пример на таблицах - пример 1 был бы идеальным, но я правда пока не знаю как его адаптировать к раскрывающемуся js списку, пока не получилось, работаю над этим

P.S. у меня сейчас ie9beta2, либо это его косяк, либо проблема конкретной версии ipb, т.к. на других форумах не замечал - у Вас bb коды вставляются самопроизвольно, разрезая текст

Edited December 6, 2010 by Provodnik

[Vlad]

Зависит от реализации меню. Если надо сделать ниспадающее меню только на CSS, тогда создается структура li-ul, как описал и вложенные меню отображаются в стилях

li ul {display: none;}

li:hover ul {display: block;}

Если требуется всего лишь подсветка пункта, тогда a:hover {background: red;}, в общем, ничего не мешает добавить этот стиль в любое меню.