J
JB
I have created a heirarchical menu system using div layers and display
properties. This works perfectly well in firefox and netscape but the
results in ie are appalling.
In firefox the menus expand and contract as expected. In ie all menu
items are always shown. Everything past the first </div> tag is show
at the full screen width and the only thing that is expended or
contracted is the white space between the menu items which ie has
spuriously added anyway. Can some kind soul tell me what I am doing
wrong.
Code follows (apologies for the length of the extract)
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
..menu { vertical-align:top;
width: 160px;
padding: 0px;
margin: 0px;
list-style:none; }
..menu ul { padding: 0px; }
/* navigation level1 */
..level1 { margin: 0px; padding: 0px; list-style: none; font-weight:
bold; font-size: 11px; line-height: 13px; display: block;}
..level1 li { display: block; }
..level1 a { color: #FFFFFF; padding: 5px 5px 5px 10px; display: block;
border-bottom: 1px solid #ffffff; background-color: #999999;
text-decoration: none;}
/* navigation level2 */
..level2 {margin: 0px; padding: 0px; list-style: none; font-weight:
normal; font-size: 11px; line-height: 12px;}
..level2 li { display: block; }
..level2 a { color:#000000; padding: 4px 4px 4px 20px; display: block;
border-bottom: 1px solid #ffffff; background-color:#FEE5AC; }
/* navigation level3 */
..level3 {margin: 0px; padding: 0px; list-style: none; font-weight:
normal; font-size: 11px; }
..level3 li { display: block; }
..level3 a { padding: 4px 4px 4px 25px; display: block; border-bottom:
1px solid #ffffff; background-color: #FDF2D6; color: #000000; }
/* menu visibility */
#men-0-sub {display:none;}
#men-0-0-sub {display:none;}
#men-0-1-sub {display:none;}
#men-1-sub {display:none;}
</style>
</head>
<body>
<p>This is a menu</p>
<script language="javascript">
<!--
function select(menid) {
//alert("set selection to " + menid);
}
function togglemenu(menid) {
if (document.getElementById) {
// this is the way the standards work
var style2 = document.getElementById(menid).style;
//style2.visibility = "hidden";
style2.display = style2.display? "":"block";
} else if (document.all) {
// this is the way old msie versions work
var style2 = document.all[menid].style;
style2.display = style2.display? "":"block";
} else if (document.layers) {
// this is the way nn4 works
var style2 = document.layers[menid].style;
style2.display = style2.display? "":"block";
}
}
-->
</script>
<div class="menu">
<ul>
<li class="level1" id="men-0"><a
href="javascript:togglemenu('men-0-sub');select('men-0');">menu
0</a></li>
<div id="men-0-sub">
<li class="level2" id="men-0-0"><a
href="javascript:togglemenu('men-0-0-sub');select('men-0-0');">menu 0
0</a></li>
<div id="men-0-0-sub">
<li class="level3" id="men-0-0-0"><a
href="javascript:select('men-0-0-0');">menu 0 0 0</a></li>
<li class="level3" id="men-0-0-1"><a
href="javascript:select('men-0-0-1');">menu 0 0 1</a></li>
</div>
<li class="level2" id="men-0-1"><a
href="javascript:togglemenu('men-0-1-sub');select('men-0-1');">menu 0
1</a></li>
<div id="men-0-1-sub">
<li class="level3" id="men-0-1-0"><a
href="javascript:select('men-0-1-0');">menu 0 1 0</a></li>
<li class="level3" id="men-0-1-1"><a
href="javascript:select('men-0-1-1');">menu 0 1 1</a></li>
</div>
<li class="level2" id="men-0-2"><a
href="javascript:select('men-0-2');">menu 0 2</a></li>
<li class="level2" id="men-0-3"><a
href="javascript:select('men-0-3');">menu 0 3</a></li>
</div>
<li class="level1" id="men-1"><a
href="javascript:togglemenu('men-1-sub');select('men-1');">menu
1</a></li>
<div id="men-1-sub">
<li class="level2" id="men-1-0"><a
href="javascript:select('men-1-0');">menu 1 0</a></li>
</div>
</ul>
</div>
</body>
</html>
properties. This works perfectly well in firefox and netscape but the
results in ie are appalling.
In firefox the menus expand and contract as expected. In ie all menu
items are always shown. Everything past the first </div> tag is show
at the full screen width and the only thing that is expended or
contracted is the white space between the menu items which ie has
spuriously added anyway. Can some kind soul tell me what I am doing
wrong.
Code follows (apologies for the length of the extract)
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
..menu { vertical-align:top;
width: 160px;
padding: 0px;
margin: 0px;
list-style:none; }
..menu ul { padding: 0px; }
/* navigation level1 */
..level1 { margin: 0px; padding: 0px; list-style: none; font-weight:
bold; font-size: 11px; line-height: 13px; display: block;}
..level1 li { display: block; }
..level1 a { color: #FFFFFF; padding: 5px 5px 5px 10px; display: block;
border-bottom: 1px solid #ffffff; background-color: #999999;
text-decoration: none;}
/* navigation level2 */
..level2 {margin: 0px; padding: 0px; list-style: none; font-weight:
normal; font-size: 11px; line-height: 12px;}
..level2 li { display: block; }
..level2 a { color:#000000; padding: 4px 4px 4px 20px; display: block;
border-bottom: 1px solid #ffffff; background-color:#FEE5AC; }
/* navigation level3 */
..level3 {margin: 0px; padding: 0px; list-style: none; font-weight:
normal; font-size: 11px; }
..level3 li { display: block; }
..level3 a { padding: 4px 4px 4px 25px; display: block; border-bottom:
1px solid #ffffff; background-color: #FDF2D6; color: #000000; }
/* menu visibility */
#men-0-sub {display:none;}
#men-0-0-sub {display:none;}
#men-0-1-sub {display:none;}
#men-1-sub {display:none;}
</style>
</head>
<body>
<p>This is a menu</p>
<script language="javascript">
<!--
function select(menid) {
//alert("set selection to " + menid);
}
function togglemenu(menid) {
if (document.getElementById) {
// this is the way the standards work
var style2 = document.getElementById(menid).style;
//style2.visibility = "hidden";
style2.display = style2.display? "":"block";
} else if (document.all) {
// this is the way old msie versions work
var style2 = document.all[menid].style;
style2.display = style2.display? "":"block";
} else if (document.layers) {
// this is the way nn4 works
var style2 = document.layers[menid].style;
style2.display = style2.display? "":"block";
}
}
-->
</script>
<div class="menu">
<ul>
<li class="level1" id="men-0"><a
href="javascript:togglemenu('men-0-sub');select('men-0');">menu
0</a></li>
<div id="men-0-sub">
<li class="level2" id="men-0-0"><a
href="javascript:togglemenu('men-0-0-sub');select('men-0-0');">menu 0
0</a></li>
<div id="men-0-0-sub">
<li class="level3" id="men-0-0-0"><a
href="javascript:select('men-0-0-0');">menu 0 0 0</a></li>
<li class="level3" id="men-0-0-1"><a
href="javascript:select('men-0-0-1');">menu 0 0 1</a></li>
</div>
<li class="level2" id="men-0-1"><a
href="javascript:togglemenu('men-0-1-sub');select('men-0-1');">menu 0
1</a></li>
<div id="men-0-1-sub">
<li class="level3" id="men-0-1-0"><a
href="javascript:select('men-0-1-0');">menu 0 1 0</a></li>
<li class="level3" id="men-0-1-1"><a
href="javascript:select('men-0-1-1');">menu 0 1 1</a></li>
</div>
<li class="level2" id="men-0-2"><a
href="javascript:select('men-0-2');">menu 0 2</a></li>
<li class="level2" id="men-0-3"><a
href="javascript:select('men-0-3');">menu 0 3</a></li>
</div>
<li class="level1" id="men-1"><a
href="javascript:togglemenu('men-1-sub');select('men-1');">menu
1</a></li>
<div id="men-1-sub">
<li class="level2" id="men-1-0"><a
href="javascript:select('men-1-0');">menu 1 0</a></li>
</div>
</ul>
</div>
</body>
</html>