Forum Moderators: not2easy
<li>foo</li>
<li>bar</li>
<li>Things
<ul>
<li>Stuff</li>
<li>lorem</li>
</ul>
</li>
<li>ipsum</li>
A CSS class, .over, is applied to li on hover. .over looks like this
li:hover { /* for FF */
list-style: circle;
}
li.over { /* for IE */
list-style: circle;
}
HOWEVER: if you change the CSS to
li:hover { /* for FF */
list-style: circle url('/images/bullet.png') outside;
}
li.over { /* for IE */
list-style: circle url('/images/bullet.png') outside;
}
ASCII illustration of the bug, because my example page is on an internal LAN. When the mouse is over any of "Things", "Stuff", or "lorem":
foo
bar
-Things
-Stuff
-lorem
ipsum
Can anyone verify this bug? Is there a known workaround?
Given that the problem hinges on the value of the CSS, I believe my JS is not the cause, so I've omitted it. If you think that it might actually be the problem, I'd be glad to post it.
Thanks much in advance.
it might be the javascript, I have tested with a suckerfish script that I have and everything seems to be working fine in both browsers!
however, it could possibly be an IE CSS hasLayout error, which is known to affect lists especially ones with background changes on hover.
If this is only happening when the list is placed into a designed page. I think it would be advantageous if you could isolate just the list HTML and the CSS/javascript into a separate test page and if the problem is still there then do post your code (script included)
Then if it does turn out to just be happening in a page that has other stuff in it ~ try applying a height to the <ul> or <li> elements (any height will do for testing IE only) and see if that helps IE's hover, again if not post the code and explain what you tried.
when you post the code please examplify any links but do leave any class names and ID's intact in both CSS and HTML and please let us know what Doctype you're using, thanks
Suzy
PS, Please, don't post a link to test page .. see Forum Charter [webmasterworld.com] ~ thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN [w3.org...]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
li {
list-style: none;
}
li:hover {
list-style: circle url("bullet.png") outside;
}
li.over {
list-style: circle url("bullet.png") outside;
}
</style>
<script type="text/javascript">
startList = function () {
if (document.all && document.getElementById) {
var lists = document.getElementsByTagName("ul");
for (var i=0; i < lists.length; i++) {
for (var i2=0; i2 < lists[i].childNodes.length; i2++) {
var node = lists[i].childNodes[i2];
if (node.nodeName=="LI") {
node.onmouseover = function () {
this.className+=" over";
}
node.onmouseout = function () {
this.className = this.className.replace(" over", "");
}
}
}
}
}
}
window.onload = startList;
</script>
</head>
<body>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">ipsum</a></li>
<li><a href="#">dolor</a>
<ul>
<li><a href="#">sit</a></li>
<li><a href="#">amet</a></li>
<li><a href="#">cosectetuer</a></li>
</ul>
</li>
<li><a href="#">adipiscing</a></li>
<li><a href="#">elit</a></li>
</ul>
</body>
</html>
I tried applying width and height of 1em and 100% to li, li.over, ul, and ul.over, with some strange, but ultimately unhelpful results.
The only link, bullet.png is to any small bullet image, in this case a 14x2 black line.
Thanks for the help.
[edited: trying to fix code layout]
Well what can I say you live and learn about a new(?) IE bug :o
wonders.. as this one does not seem to be related to the hasLayout property it may still be there when hover is accepted properly (IE7)?
I found very little, in fact nothing related, googling so I just tried a few things and got it to work and it simply comes down to - don't use the shorthand list-style property in the <li> rule!
li {
list-style-type: none;
list-style-image: none;
}li:hover, li.over {
list-style: circle url("bullet.png"); /* 'outside' is the default so no need to specify */
}
Note fyi, I tried a couple of different scripts and a behaviour file and all reacted the same (as in they worked when the CSS was above) so it's not a script issue
Suzy
