Problem with "jumping DIV" in IE6 when switching between display:Block & None

I am testing the layout where when a user clicks on a DIV, another DIV that contains more detail information will be displayed. If the user click the first DIV again, the detail information DIV will be hidden away.

I have no problem getting it to work so far. However, in IE6, when the first item’s detail DIV is displayed, and if I click on the 2nd item’s title DIV to display/hide 2nd item’s detail info DIV, it keeps jumping up and down after the click and when mouseOver/Out.

There is no problem in Firefox. I am guess it is an IE CSS bug?

Can anyone help me? (I’m using Strict DocType)

Here is the page to show you what I mean:
[url]http://www.wonsun.com/testcontent.asp[/url]

HTML

[code]
<div class=”contenttitle”>Title</div>
<div id=”outtercontainer”>

<div class=”itemtitlediv” onMouseOver=”javascript:titlerollover(‘bky1’);” onMouseOut=”javascript:titlerollback(‘bky1’);” onClick=”javascript:detailswitch(‘bky1’);” id=”bky1″>
<div class=”itemtitle”>Content Title One</div>
<div class=”itemsubtitleleft”>Subtitle Left</div>
<div class=”itemsubtitleright”>Subtitle Right</div>
<div style=”clear:both;”></div>
</div>

<div style=”display: none;” id=”bky1detail”>
<a href=”http://www.google.com”><img class=”itemdetailimage” src=”images/fern.jpg” width=”80″ height=”80″ alt=”To Google site.” /></a>
<div class=”itemdetailtext”>
Saturday’s power cut started in the German city of Cologne before quickly spreading. Belgium, the Netherlands, Austria and Croatia were also affected, with the cuts even reaching as far as Morocco. The worst recent power blackout struck Italy in 2003, plunging the country into darkness for 18 hours between 28 and 29 September.
</div>
<div style=”clear:both;”>&nbsp;</div>
</div>

<div class=”itemtitlediv” onMouseOver=”javascript:titlerollover(‘stf1’);” onMouseOut=”javascript:titlerollback(‘stf1’);” onClick=”javascript:detailswitch(‘stf1’);” id=”stf1″>
<div class=”itemtitle”>Content Title Two</div>
<div class=”itemsubtitleleft”>Subtitle Left</div>
<div class=”itemsubtitleright”>Subtitle Right</div>
<div style=”clear:both;”></div>
</div>

<div style=”display: none;” id=”stf1detail”>
<a href=”http://www.google.com”><img class=”itemdetailimage” src=”images/fern.jpg” width=”80″ height=”80″ alt=”To Google site.” /></a>
<div class=”itemdetailtext”>
Saturday’s power cut started in the German city of Cologne before quickly spreading. Belgium, the Netherlands, Austria and Croatia were also affected, with the cuts even reaching as far as Morocco. The worst recent power blackout struck Italy in 2003, plunging the country into darkness for 18 hours between 28 and 29 September.
</div>
<div style=”clear:both;”>&nbsp;</div>
</div>

</div>

[/code]

CSS

[code]
.contenttitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
}

#outtercontainer {
width: 98%;
min-height: 300px;
height: auto !important;
height: 300px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;

}

.itemtitle{
margin: 5px 15px 0 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

.itemsubtitleleft{
float: left;
width: 285px;
margin: 0 5px 5px 15px;
font-size: 75%;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #EE6000;
text-align:left;
display: inline;
}

.itemsubtitleright{
float: right;
text-align: right;
width: 150px;
margin: 0 15px 5px 5px;
font-size: 75%;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #EE6000;
}

.itemtitlediv {
margin: 10px 5px 10px 5px;
width: 480px;
cursor: pointer;
cursor: hand;
border: 1px solid #DDDDDD;
}

.itemtitledivhilite {
margin: 10px 5px 10px 5px;
width: 480px;
cursor: pointer;
cursor: hand;
background-color: #FFEAD7;
border-top: 1px solid #CDA887;
border-left: 1px solid #CDA887;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
.itemdetaildiv {
margin: 10px 5px 0px 5px;
}

.itemdetailimage {
display: inline;
margin: 0 25px 0 25px;
border: none 0px;
float: left;

}

.itemdetailtext {
width: 340px;
margin 0 25px 0 0;
float: right;
font-size: 80%;
line-height: 130%;
}
[/code]

JavaScript

[code]
function titlerollover(objname){
var titlediv = document.getElementById(objname);
titlediv.className=”itemtitledivhilite”;
}

function titlerollback(objname){
var titlediv = document.getElementById(objname);
if (document.getElementById(objname+”detail”).style.display==”none”){
titlediv.className=”itemtitlediv”;
}
}

function detailswitch(objname){
var detaildiv=document.getElementById(objname+”detail”);

if (detaildiv.style.display==”none”){
detaildiv.style.display=”block”;
document.getElementById(objname).className=”itemtitledivhilite”;
}else{
detaildiv.style.display=”none”;
document.getElementById(objname).className=”itemtitlediv”;
}

}
[/code]

I appologize for the long page.

Thanks for helping.

Also in #JavaScript _↴