By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,747 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,747 IT Pros & Developers. It's quick & easy.

cross browser display block none

P: n/a
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;">
&nbsp;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;">
&nbsp;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;">
&nbsp;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>

Dec 16 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
ru************@hotmail.com wrote:
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:


This should fix that:

function minimizeThis(arg, imgid){
if (document.getElementById(arg).style.display == 'none'){
document.getElementById(arg).style.display = '';
...
}else{
...
}
}
JW
Dec 16 '05 #2

P: n/a
ru************@hotmail.com wrote:
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:
This is not a JavaScript problem, it is a HTML/CSS issue. When you see
differences between IE and Firefox related to CSS, it is more likely
that IE is wrong.

You have styles applied in the style sheet, inline and by JavaScript -
that creates considerable complexity in itself.

Ask your question in:

comp.infosystems.www.authoring.stylesheets
But before you do:

1. Make sure you create valid HTML - validate it at the W3C (or use some
other validator). Your current code has a number errors.

2. Indent posted code using 2 or 4 spaces, not tabs.

3. Manually wrap code at about 70 characters, otherwise auto-wrapping
will probably introduce errors.

4. Give your images dimensions. Anyone playing with your code has no
idea what the actual layout should look like.

5. Reduce your code to the minimum that displays the error or put it up
on a server and post the URL.

<html>
Missing doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
Missing type attribute

<style type="text/css">
[...] </style>
<script>
Missing type attribute.

<script type="text/javascript">

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>
Don't forget feature testing:

function minimizeThis(arg, imgid)
{
var d, i;
if ( document.getElementById
&& (d = document.getElementById(arg))
&& (i = document.getElementById(imgid))
&& d.style ){
if ('none' == d.style.display){
d.style.display = '';
d.style.height = '100px';
i.src = 'min.gif';
} else {
d.style.display = 'none';
d.style.height = '1px';
i.src = 'max2.gif';
}
}
}

</head>
Missing title element.

<body>
[...]
onclick="minimizeThis('underMusic', 'musicMin')" />


There is nothing here to indicate the use of XHTML, so keep your markup
as HTML - don't use ' />'. You are also missing alt attributes on the
images, use alt='minimise' & alt='maximise' or similar.
[...]
--
Rob
Dec 16 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.