Forum Moderators: not2easy
I am working on an expanding menu using javascript and I am trying to display a small graphic beside a url within the menu. It looks fine in Firefox, Opera and Konqueror however in IE(6) it draws the graphic on the line above. I have included the code below, if anyone could help it would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<title>Expanding Menu example</title>
<style type="text/css">
body {
margin: 0px;
padding:0px;
color: #333;
font-family: arial,sans-serif;
font-size: 11px;
text-align: left
}
.out {
display:block;
background:#bbb;
border:1px solid #ddd;
position:relative;
margin:1em 10px;
}
.in {
background:#fff;
border:1px solid #555;
position:relative;
padding-top: 20px;
padding-left: 10px;
font-weight:normal;
height: 600px;
background-color: #F0F8FF;
}
.ltin {
left:-5px;
}
.tpin {
top:-5px;
}
.narrow {
width:175px;
height: 610px;
}
.narrow ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
.header a{
margin-left: 1px;
text-decoration: none;
}
.secbutton img {
margin-top: 0px;
float:right;
}
.secbutton ul {
list-style: none;
margin: 0;
padding: 0;
}
.secbutton ul li {
margin: 0;
padding: 0;
}
.secbutton li a {
background-color: #EEE9E9;
color: #3670A7;
clear: left;
display: block; /* This is the line that appears to throw IE */
width: 14em;
}
</style>
</head>
<body>
<div class="out narrow">
<div class="in ltin tpin">
<div class="header">
<ul class="secbutton">
<li>
<script type="text/javascript"><!--//--><![CDATA[//><!--
document.writeln('<img id="bar1" src="closed.png" alt="Open list" onclick="toggle(\'bar1\',\'section1\');"/>');
//--><!]]></script>
<a href="javascript:toggle('bar1','section1')">Section 1</a>
</li>
</ul>
</div>
<ul id="section1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<div class="header">
<ul class="secbutton">
<li>
<script type="text/javascript"><!--//--><![CDATA[//><!--
document.writeln('<img id="bar2" src="closed.png" alt="Open list" onclick="toggle(\'bar2\',\'section2\');"/>');
//--><!]]></script>
<a href="javascript:toggle('bar2','section2')">Section 2</a>
</li>
</ul>
</div>
<ul id="section2">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
document.getElementById("section1").style.display="none"; // collapse list
document.getElementById("section2").style.display="none"; // collapse list
// this function toggles the status of a list
function toggle(image,list){
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
document.getElementById(image).src="open.png";
document.getElementById(image).alt="Close list";
}
else{
listElementStyle.display="none";
document.getElementById(image).src="closed.png";
document.getElementById(image).alt="Open list";
}
}
</script>
</body>
</html>
Thanks
