By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

List item border and background disappear on mouseover!

P: 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>
Jan 23 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
The top of your code is not correctly laid out. It should be like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title</title>
<style type="text/css">
.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>
</head>
<body>

In addition, you should use a strict doctype. You are not transitioning from anything.
Jan 23 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.