list style with image and Mozilla

[A.Translator]

I have an unordered list styled like this:

ul {
background-color:#FFFFFF;
text-align:left;
display: block;
text-decoration:none;
list-style-position:inside;
list-style:none;
}

ul a:hover {
list-style-image:url(images/tick.gif);
}

In IE6 this shows as intended an image as 'bullet' when the cursor hovers
over the link, but in Opera7 and Mozilla 1.5 the image does not show on
hover.

Could someone help me to make the image show up in other browsers than IE,
please? Perhaps it has nothing to do with the image, just with the a:hover?
I tried various combinations, but none that works.

Your help will be greatly appreciated.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[Martin Honnen]

A.Translator wrote:

I have an unordered list styled like this:

ul {
background-color:#FFFFFF;
text-align:left;
display: block;
text-decoration:none;
list-style-position:inside;
list-style:none;
}

ul a:hover {
list-style-image:url(images/tick.gif);
}

In IE6 this shows as intended an image as 'bullet' when the cursor hovers
over the link, but in Opera7 and Mozilla 1.5 the image does not show on
hover.

You shouldn't use
list-style:none;
if you want to have an item marker I think.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Steve Pugh]

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

ul a:hover {
list-style-image:url(images/tick.gif);
}
list-style-image does not apply to <a> elements which is what you are
selecting with the above CSS.
In IE6 this shows as intended an image as 'bullet' when the cursor hovers
over the link, but in Opera7 and Mozilla 1.5 the image does not show on
hover.

Mozilla and Opera are correct. I'm quite surprised that even IE
bothers to guess what you wanted from the above code.

li:hover {list-style-image:url(images/tick.gif);}

would be the correct way of doing it. But it doesn't work in IE as IE
only supports :hover on <a> elements.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[A.Translator]

On Thu, 22 Jan 2004 18:11:36 +0000, Steve Pugh wrote:

Mozilla and Opera are correct. I'm quite surprised that even IE
bothers to guess what you wanted from the above code.

li:hover {list-style-image:url(images/tick.gif);}

Thanks for your wuick reply!
I had try to set the style on li, but did not get any result.

Can it be done what I want?
Should I make separate styles for IE and the others?

Thanks again.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[Steve Pugh]

"A.Translator" <ad******************@yaBISHhoo.com> wrote:

On Thu, 22 Jan 2004 18:11:36 +0000, Steve Pugh wrote:

Mozilla and Opera are correct. I'm quite surprised that even IE
bothers to guess what you wanted from the above code.

li:hover {list-style-image:url(images/tick.gif);}

Thanks for your wuick reply!
I had try to set the style on li, but did not get any result.

Can it be done what I want?
Should I make separate styles for IE and the others?

As sensible browsers ignore the version you had to begin with there's
no reason why you can't combine the two:
ul a:hover, ul li:hover { list-style-image:url(images/tick.gif); }

Hmm, I can't seem to get it to work at all in Opera but I haven't
really tried very hard, so maybe it can be made to work.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[A.Translator]

On Thu, 22 Jan 2004 18:39:21 +0000, Steve Pugh wrote:

I can't seem to get it to work at all in Opera

No, but it does work here in Moz 1.5 ánd in IE6.

Thank you very much.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[e n | c k m a]

> Can it be done what I want?

Should I make separate styles for IE and the others?

The way I would probably do it is to use backgrounds and padding which
should work in "all" browsers.

ul{
list-style:none}

ul li a{
padding:2px 2px 2px 8px;
background:url(image1.gif) no-repeat}

ul li a:hover{
background-image:url(image2.gif)}

The above is rough code and I haven't tested it but you get the general idea
and I remember when I used/tested something similar, I got it working in
Mozilla, IE and Opera.

Good luck!

Nickos Maximus.

[A.Translator]

On Fri, 23 Jan 2004 00:58:14 GMT, e n | c k m a wrote:

The above is rough code and I haven't tested it but you get the general idea
and I remember when I used/tested something similar, I got it working in
Mozilla, IE and Opera.

Thanks very much, but the idea is the image is the bullet, not the bg.
URL: http://www.xs4all.nl/~hogen/TaalVlinder/.

I am a newbie at css and new in this group, but very impressed with the
friendly help I get. Thank you all very much!
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[e n | c k m a]

> Thanks very much, but the idea is the image is the bullet, not the bg.

URL: http://www.xs4all.nl/~hogen/TaalVlinder/.

You can make the BG look like a bullet though - see how I did it at
www.strategis.com.au
They look like bullets but they're not - and it works in "all" recent
browsers.

Nickos.

[A.Translator]

On Fri, 23 Jan 2004 12:00:16 GMT, e n | c k m a wrote:

You can make the BG look like a bullet though - see how I did it at
www.strategis.com.au
They look like bullets but they're not - and it works in "all" recent
browsers.

Sorry to be so stupid, but I cannot see * how* you did it.
I can see you set a class 'mainBG' to the DIV containing the list.
Is that what you mean?
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]

[e n | c k m a]

> Sorry to be so stupid, but I cannot see * how* you did it.

I can see you set a class 'mainBG' to the DIV containing the list.
Is that what you mean?

Well, I meant that you could see an example of what I meant at that site -
not that you would immediately understand how I did it.

Besides, those images don't change on hover. It was just an alternative to
using list-images.

The way I would do it (using almost exact code) would be:

in HTML:

<div id="menu">
<ul>
<li><a href="..." title="...">My Link</a></li>
<li><a href="..." title="...">My Link 2</a></li>
</ul>
</div>

in CSS:

#menu ul {list-style:none}
#menu ul li {margin:0;padding:0}

#menu ul li a {
text-decoration:none;
color:#000;
background:url(bullet.gif) no-repeat left;
/*padding-left = the width (if not more) of your bullet image*/
padding-left:15px}
#menu ul li a:hover {
background-image:url(bulletHover.gif)}

Something like that would probably work. Give it a go but you might have to
experiment with it a little.
If anyone has anything to add that may be helpful, please do.

Nick.

[A.Translator]

On Sat, 24 Jan 2004 01:20:02 GMT, e n | c k m a wrote:

#menu ul li a:hover {
background-image:url(bulletHover.gif)}

Something like that would probably work.

Thank you! Almost there.
--
Groet, Adriana.
[throw rubbish out if you want to reach me by e-mail]