Hello, hello,
Little bit stuck with some drop down menus:
In Chrome - my main browser - they behave exactly as expected. The menus are the same size as the Subject links and the X at the end of each link under subject one (which I added for no other reason than to see if I could) Appears neatly.
In Mozilla Firefox - The dropdown menus are the right size, the same as their parent Subjects but in the first menu the X appears to be off the bottom of each link area and the bottom of the menu has a think Cyan strip.
In IE - It's a complete mess, the menus are larger than their parent and the first menu, although it behaves correctly has a thin Cyan strip down the side and a thick one at the bottom. (Comparison with the other browsers leads me to believe that it's not actually the menus that are larger but rather the Subject headers that are smaller than the 140px they are supposed to be set to).
I'm posting this here because I figured it's a CSS problem to do with different browser behaviours, I just don't know how to correct it or what I should be looking for.
Here's a link to the page so you can see it:
http://90.221.181.204/ (I've temporarily enabled forwarding of port 80 through my firewall to be sent to my Apache server)
Here's the actual page code:
It's just a small experiment page so I haven't bothered separating the JS and the CSS into different files.
<html>
<head>
<style type="text/css">
<!--
#dropDownMenu {
margin: 0;
padding: 0;
/*z-index: 30*/
}
#dropDownMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:11px;
}
#dropDownMenu li a {
display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 120px;
background-color:#6666CC;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
#dropDownMenu li a:hover {
background-color:#6699FF
}
#dropDownMenu div {
width:138px;
position:absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-color:#00FFCC;
border: 1px solid #6666CC
}
#dropDownMenu div span {
visibility:hidden;
float:right;
}
#dropDownMenu div a {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color:#CCCCFF;
color: #5555BB;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#dropDownMenu div a:hover {
background-color:#6699FF;
color: #FFFFFF
}
-->
</style>
<script type="text/javascript">
<!--
var timeout = 500;
var closeTimer = 0;
var dropDownMenuItem = 0;
// open hidden layer
function menuOpen(id)
{
// cancel close timer
menuCancelCloseTimer();
// close old layer
if(dropDownMenuItem) dropDownMenuItem.style.visibility = 'hidden';
// find the layer by the ID passed as the function parameter (eg m1 m2 m3) and show it
dropDownMenuItem = document.getElementById(id);
dropDownMenuItem.style.visibility = 'visible';
}
// show the "X" at the end of each link
function menuSpanShow(id){
theSpan=document.getElementById(id);
theSpan.style.visibility="visible";
}
//hide the "X" at the end of each link
function menuSpanHide(id){
theSpan=document.getElementById(id);
theSpan.style.visibility="hidden";
}
// close shown layer
function menuClose()
{
if(dropDownMenuItem) dropDownMenuItem.style.visibility = 'hidden';
}
// go close timer
function menuCloseTimer()
{
closeTimer = window.setTimeout(menuClose, timeout);
}
// cancel close timer
function menuCancelCloseTimer()
{
if(closeTimer)
{
window.clearTimeout(closeTimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = menuClose;
-->
</script>
<title></title>
</head>
<body>
<h2 style="color:#666666">Basic Dropdown Menus</h2>
<ul id="dropDownMenu">
<li><a href="#"
onmouseover="menuOpen('menu1')"
onmouseout="menuCloseTimer()">Subject One</a>
<div id="menu1"
onmouseover="menuCancelCloseTimer()"
onmouseout="menuCloseTimer()">
<a href="#" onMouseOver="menuSpanShow('a')" onMouseOut="menuSpanHide('a')">Anteaters <span id="a">X</span></a>
<a href="#" onMouseOver="menuSpanShow('b')" onMouseOut="menuSpanHide('b')">Badgers <span id="b">X</span></a>
<a href="#" onMouseOver="menuSpanShow('c')" onMouseOut="menuSpanHide('c')">Cats <span id="c">X</span></a>
<a href="#" onMouseOver="menuSpanShow('d')" onMouseOut="menuSpanHide('d')">Dogs <span id="d">X</span></a>
<a href="#" onMouseOver="menuSpanShow('e')" onMouseOut="menuSpanHide('e')">Elephants <span id="e">X</span></a>
</div>
</li>
<li><a href="#"
onmouseover="menuOpen('menu2')"
onmouseout="menuCloseTimer()">Subject Two</a>
<div id="menu2"
onmouseover="menuCancelCloseTimer()"
onmouseout="menuCloseTimer()">
<a href="#">Astronauts</a>
<a href="#">Baseball Players</a>
<a href="#">Commandos</a>
<a href="#">Divers</a>
</div>
</li>
<li><a href="#"
onmouseover="menuOpen('menu3')"
onmouseout="menuCloseTimer()">Subject Three</a>
<div id="menu3"
onmouseover="menuCancelCloseTimer()"
onmouseout="menuCloseTimer()">
<a href="#">Nothing</a>
<a href="#">Zip</a>
<a href="#">Nada</a>
<a href="#">begone</a>
</div>
</li>
<li><a href="#">Subject Four</a></li>
<li><a href="#">Subject Five</a></li>
</ul>
<div style="clear:both"></div>
</body>
</html>
