I'm experimenting with some pure CSS menus and I'm trying to use an icon with them.
see http://www.fogcat.co.uk/css/test.html
css is http://www.fogcat.co.uk/css/test3.css
But the icons are appearing behind other menu items (and the span
underline)- even though I have the z-index set to 100. What am I not doing?
It works fine in Firefox but not IE6.
Z-Index?
I will hazard a guess that it's to do with try to take a child element out of its' parent element by using position: absolute;
Try not using:
div#menudiv li a img
and simply replace each image with a class such as img.over or something.
It's so late that I may have missed the completely obvious, hopefully someone else will pick it up. Will hopefully have another look tomorrow.
Z-Index?
Thanks.. but using
a img.iover{} and
a:hover img.iover{}
gave me the same results in IE6 (on winXP).
I need the img selector nested in the a selctor to contol the visibility of the icon when hovering over the link so I can't use a simple img.over on it's own.
Again, I'm learming this so, I'm totally prepared to be corrected on my assumptions.