Sent by Scott Hamm on 28 March 2005 15:03
While trying to learn z-index using position absolute as required,
when the mouse moves around inside the a link, the background
flickers. After googling for a while, I am unable to understand this
problem. Can anyone help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Z-index</title>
<style type="text/css">
<!--
ul.activities_ul {list-style:none;margin:0;padding:0;}
ul.activities_ul li {height:60px;width:90px;position:absolute;z-index:1;}
ul.activities_ul li.a {background:url(images/photo1.gif) no-repeat top
left;left:0px;}
ul.activities_ul li.b {background:url(images/photo2.gif) no-repeat top
left;left:90px;}
ul.activities_ul li.c {background:url(images/photo3.gif) no-repeat top
left;left:180px;}
ul.activities_ul li.d {background:url(images/photo4.gif) no-repeat top
left;left:270px;}
ul.activities_ul li a
{display:block;width:100%;height:100%;text-indent:-1000px;text-decoration:none;}
ul.activities_ul li a:hover {position:absolute;z-index:-1;}
ul.activities_ul li.a a:hover {background-image: url(images/bk1.gif);}
ul.activities_ul li.b a:hover {background-image: url(images/bk2.gif);}
ul.activities_ul li.c a:hover {background-image: url(images/bk3.gif);}
ul.activities_ul li.d a:hover {background-image: url(images/bk4.gif);}
-->
</style>
</head>
<body>
<div id="activitiesbox_new">
<ul class="activities_ul">
<li class="a"><a href="#">Main</a></li>
<li class="b"><a href="#">Procedures</a></li>
<li class="c"><a href="#">Schedules</a></li>
<li class="d"><a href="#">Training</a></li>
</ul>
</div>
</body>
</html>
--
Power to people, Linux is here.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
