Menu
Hello everyone!
I have a problem with a select component in IE(In Firefox works well).
[code=html]<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Select box</title>
<style>
body
{
background:#000000;
}
#JumpTo {
position:absolute; display:none; z-index:-1000; left:-1px; top:15px; width:70px; border:solid 1px #dbdbdb; background:#ffffff; padding:6px;
}
#JumpTo select
{
width : 69px;
font-family:arial, verdana, sans-serif;
border:solid 1px #A6ADB4;
padding-top:1px;
color:#878788;
height:18px;
font-size:10px;
}
#JumpTo .middleSelect
{
margin : 4px 0px 4px 0px;
}
#links {
PADDING-RIGHT: 0px; z-index:2; PADDING-LEFT: 114px; PADDING-BOTTOM: 0px; PADDING-TOP: 47px; POSITION: relative
}
#links div.link
{
position:relative; z-index:2; float:left; margin-right:7px; border:solid 1px #dbdbdb; background:#ffffff;
}
#links div.linkSelected
{
position:relative; z-index:2; float:left; margin-right:7px; border-top:solid 1px #dbdbdb; border-left:solid 1px #dbdbdb; border-right:solid 1px #dbdbdb; background:#ffffff; border-bottom:solid 1px #ffffff;
}
#links span.heading {
display:block; font-family: Tahoma; font-size:9px; color:#7e7e7e; text-decoration:none; padding:1px 6px 1px 6px; line-height:13px;
}
</style>
<script language=”javascript”>
function showOptions(objLink, sOptionsId)
{
objLink.className = “linkSelected”;
document.getElementById(sOptionsId).style.display = “block”;
}
function hideOptions(objLink, sOptionsId)
{
objLink.className = “link”;
document.getElementById(sOptionsId).style.display = “none”;
}
</script>
</head>
<body>
<div id=”links”>
<div class=”link” id=”lnk” onmouseover=”showOptions(this, ‘JumpTo’);” onmouseout=”hideOptions(this, ‘JumpTo’);”>
<span class=”heading”>JUMP TO</span>
<div id=”JumpTo”>
<select id=”list1″>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>
<select id=”list2″ class=”middleSelect”>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>
<select id=”list3″>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
<option value=”5″>5</option>
</select>
</div>
</div>
</div>
</body>
</html>
Try to paste this code and run this on IE and you’ll see that the lower part disappears when rolling over the select components. I can’t see why up to now ?