cross browser display block none

R

ruby_bestcoder

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=='none'){
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>
 
J

Janwillem Borleffs

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:
Click to expand...

This should fix that:

function minimizeThis(arg, imgid){
if (document.getElementById(arg).style.display == 'none'){
document.getElementById(arg).style.display = '';
...
}else{
...
}
}


JW
 
R

RobG

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:
Click to expand...

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>
Click to expand...

Missing doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
Click to expand...

Missing type attribute

<style type="text/css">


[...]
</style>
<script>
Click to expand...

Missing type attribute.

function minimizeThis(arg, imgid){
if(document.getElementById(arg).style.display=='none'){
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>
Click to expand...

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>
Click to expand...

Missing title element.

<body>
[...]

onclick="minimizeThis('underMusic', 'musicMin')" />
Click to expand...

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.


[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Clickable Div Block 1
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
Align img inside nav tabs section 5
Show text on-click with transition 2

Members online

No members online now.
Total: 31 (members: 1, guests: 30)
Robots: 485

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top