Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > cross browser display block none

Reply
Thread Tools

cross browser display block none

 
 
ruby_bestcoder@hotmail.com
Guest
Posts: n/a
 
      12-16-2005
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;
cursorointer;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;
cursorointer;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;
cursorointer;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>

 
Reply With Quote
 
 
 
 
Janwillem Borleffs
Guest
Posts: n/a
 
      12-16-2005
http://www.velocityreviews.com/forums/(E-Mail Removed) 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


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      12-16-2005
(E-Mail Removed) 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Iframe style.display=block and none does not work with parent. Chandra HTML 0 03-07-2007 06:36 AM
Iframe style.display=block and none does not work with parent. Chandra ASP .Net 0 03-07-2007 05:49 AM
display none/block for nested elements Erwin Moller Javascript 3 08-31-2006 09:38 AM
Javascript and div's with style.display=none or block bugging in IE 5.5 and 6.0 Erwin Moller Javascript 2 02-21-2006 08:38 AM
display:none/block switching, hover probem Jon W Javascript 1 12-29-2004 09:55 AM



Advertisments