Hi
Im having problem in firefox with display:none/block.
I have essentially 3 li elements. In each element there are a few
nested div:s. Clicking on one of the divs, makes another div to
display: block or none.
Again this works in IE. In ff it has a bug. When the display is none
for a div in the first li, then the next li (the one underneath) moves
up to the right, looking very ugly. Is there someone who has had the
same problem before, or that know what the problem can be? Im putting
the code here:
<html>
<head>
<style>
ul.sortablelist {
list-style-image:none;
list-style-type:none;
margin-top:5px;
margin:0px;
padding:0px;
}
ul.sortabledemo li {
padding:0px;
margin:0px;
}
li.green {
background-color: #ECF3E1;
border:1px solid #C5DEA1;
cursor: move;
}
li.orange {
border:1px solid #333333;
background-color: white;
}
</style>
<script>
function minimizeThis(arg, imgid){
if(document.getElementById(arg).style.display=='no ne'){
document.getElementById(arg).style.display='block' ;
document.getElementById(arg).style.height='100px';
document.getElementById(imgid).src='min.gif';
}
else{
document.getElementById(arg).style.display='none';
document.getElementById(arg).style.height='1px';
document.getElementById(imgid).src='max2.gif';
}
}
</script>
</head>
<body>
<div
style="height:650px;background-color:gray;width:800px;margin-left:auto;margin-right:auto;float:center;">
<div id="content"
style="background-color:gray;width:250px;height:300px;float:left;">
<div style="height:200px;">
<div style="float:left;">
<ul class="sortabledemo" id="secondlist"
style="height:150px;width:200px;">
<li class="orange" id="secondlist_secondlist1">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;
height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
Music
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img src="min.gif" id="musicMin"
onclick="minimizeThis('underMusic', 'musicMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img src="max.gif" />
</div>
<div id="underMusic" style="display:block;padding:5px;">
text
</div>
</div>
</li>
<li class="orange" id="secondlist_secondlist2">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;
height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
Sport
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img src="min.gif" id="sportMin"
onclick="minimizeThis('underSport', 'sportMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img src="max.gif" />
</div>
<div id="underSport" style="display:block;padding:5px;">
text
</div>
</div>
</li>
<li class="orange" id="secondlist_secondlist3">
<div style="width:200px;">
<div class="handle"
style="background-color:#999999;float:left;width:160px;
height:18px;cursor:move;font-family:Verdana;font-size:8pt;font-weight:bold;">
Games
</div>
<div style="float:left;width:20px;height:18px;
cursor:pointer;text-align:center;">
<img src="min.gif" id="gamesMin"
onclick="minimizeThis('underGames', 'gamesMin')" />
</div>
<div style="height:18px;float:left;width:20px">
<img src="max.gif" />
</div>
<div id="underGames" style="display:block;padding:5px">
text
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
