1
In the code below, if you mouseover the word 'here', the border and image disappear. What is causing this to happen? (I'm running MSIE 6 on Windows XP.)
(For the image, get '077988alpha_cat.gif', in the folder 'img', at the website photo-host dot org. It's a 10px by 9px bullet.)
NOTE: solutions which do not explain the problem do not help me -- I can fix the problem myself in any number of ways. What I need to know is WHY the problem is happening in the first place. Thank you.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style>
.container { float: right; width: 162px; padding-top:270px; }
.module { position: relative; overflow: hidden; width: 100%; }
.module-content { margin: 0 0 0 10px; }
.module-list { margin: 0; }
.module-list-item { background: url(alpha_cat.gif) 130px 4px no-repeat; padding:0 25px 0 0; border:1px solid black;}
h2 { font-size: 10pt; background-color: #F6F6F6; }
a {text-decoration:none; border-bottom:1px dashed #cccccc; }
a:hover{border-bottom:0px solid #cccccc; }
</style>
<div class="container" dir="rtl" style="text-align:right;">
<div class="module">
<h2>X</h2>
<div class="module-content">
<ul class="module-list">
<li class="module-list-item"><a href="#">here</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
