asked on

List item border and background disappear on mouseover!

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>

ASKER CERTIFIED SOLUTION

VirusMinus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

The strange thing is, inserting any nonempty element, even just a   before/above the container fixes the problem (for me)....