IE: a:hover bullet visibility

[Peter Schlenker]

In a navigation panel I try to place a bullet before each entry when
the link is hovered at (see http://www.shambhala.de). Mozilla does it
like expected, but IE doesn't - any ideas?

[HTML-Snippet]

<a href="http://www.shambhala.de/reisen/kailash.php"
title="[title]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/>&nbsp;</span>Tibet</a><br/>

[CSS]

a:link .bullet, a:visited .bullet {
visibility: hidden;
}
a:hover .bullet, a:active .bullet {
visibility: visible;
}
for the complete stylesheet see: http://www.shambhala.de/style.css

[Brian]

Peter Schlenker wrote:

In a navigation panel I try to place a bullet before each entry when
the link is hovered at (see http://www.shambhala.de).
Don't forget the KISS principle.
<a href="http://www.shambhala.de/reisen/kailash.php"
title="[title]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/>&nbsp;</span>Tibet</a><br/>

Are they list items? If so, then mark them up as a list.

Then, the css is fairly easy.

li a:link {list-style-type: none}
li a:hover {list-style-type: disc}

You can use an image for the marker, too, but why complicate things?

--
Brian
follow the directions in my address to email me

[Christoph Paeper]

*Brian* <us*****@julietremblay.com.invalid-remove-this-part>:

<a href="http://www.shambhala.de/reisen/kailash.php"
title="[title]"><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif"
width="9" height="9"/>&nbsp;</span>Tibet</a><br/>

<li><a href="/reisen/kailash" title="[title]"><img class="bullet"
src="/media/grafik/arrow_small.gif" width="9" height="9"
alt="&gt;">Tibet</a></li>

li {list-style: none; text-align: right}
a img.bullet {visibility: hidden; padding-right: 0.3em}
a:hover img.bullet {visibility: visible}

That should work even in IE. If not, I don't know why.
li a:link {list-style-type: none}
li a:hover {list-style-type: disc}

That's assigning a 'list-style-type' to a box (the one the 'a' element
generates), that isn't a 'list-item' by default and shouldn't be here
neither. The value also isn't inherited to the 'li', which usually does have
"display: list-item". That means your code should and will not work as you
intended. A list is a better approach than using <br>s, though.

li {list-style: none}
li:hover {list-style: url('/media/grafik/arrow_small.gif') disc}

will do as intended in some browsers, but not in IE.

a:before:hover {content: "> "; content:
url('/media/grafik/arrow_small.gif')}

will work in even fewer browsers.

P.S.: Instead of '>' you can try using a more appropriate Unicode character,
e.g. U+25B6.

--
"When a thing has been said and well, have no scruple. Take it and copy it."
Anatole France

[Brian]

Christoph Paeper wrote:

*Brian* <us*****@julietremblay.com.invalid-remove-this-part>:

li a:link {list-style-type: none}
li a:hover {list-style-type: disc}
That's assigning a 'list-style-type' to a box (the one the 'a' element
generates), that isn't a 'list-item' by default and shouldn't be here
neither. The value also isn't inherited to the 'li', which usually does have
"display: list-item". That means your code should and will not work as you
intended.

Ugh. I was having a miserable night. 3 brain-dead responses.
Apologies again.
A list is a better approach than using <br>s, though.

Well, hooray for me. :-/

--
Brian
follow the directions in my address to email me