On hover background work differently in Opera/FF than in IE

I've managed to make a menu with tabs and sub menu elements. This is done with a combination of XHTML, CSS and Javascript. The idea is that when you hover over one of the sub menu elements it should change its background to black, and then back when the cursor is moved away from it. This works in the way I intended on Opera and Firefox, but not in IE.

Relevant CSS

div#submenu {
height: 19px;
background: #a71f1f;
color: white;
border-bottom: 2px solid black;
border-top: 1px solid white;
}
div.sublinkdiv {
display: inline;
background: none;
color: #ffffff;
border: 0px solid blue;
padding-left: 5px;
padding-right: 5px;
}
.subelement {
font-family: verdana, arial, helvetica, tahoma, sans-serif;
font-size: 70%;
font-weight: bold;
cursor: pointer;
background: none;
color: white;
text-decoration: none;
}

Relevant Javascript

function subchange(element) {
document.getElementById('sub' + element).style.background = '#000000';
}
function subchangeback(element) {
document.getElementById('sub' + element).style.background = '#a71f1f';
}

Relevant XHTML


<div id="submenu">
<div id="sub1" class="sublinkdiv">
<a class="subelement" id="subelement1" onmouseover="subchange(1)" onmouseout="subchangeback(1)" href="#">First Sub</a>
</div>Ś
<div id="sub2" class="sublinkdiv">
<a class="subelement" id="subelement2" onmouseover="subchange(2)" onmouseout="subchangeback(2)" href="#">Second Sub Menu</a>
</div>
</div>

I'm thankful for any help that I can get! =)

//MainGear

[edited by: DrDoc at 10:39 pm (utc) on Feb. 9, 2007]
[edit reason] Sorry, no URLs thanks. [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
color: #fff;
}
ul {
background: #c00;
border-top: 1px solid #fff;
float: left;
margin-top: 20px;
width: 100%;
}
li {
border-left: 1px solid #fff;
float: left;
}
li :link, li :visited {
display: block;
color: #fff;
font: bold 11px Verdana;
padding: 2px 5px 3px;
text-decoration: none;
}
li :link:hover, li :visited:hover {
background: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#">First Sub</a></li>
<li><a href="#">Second Sub</a></li>
</ul>
</body>
</html>

On hover background work differently in Opera/FF than in IE

maingear

DrDoc

mihai2u

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week