473,288 Members | 2,725 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,288 software developers and data experts.

cross browser display block none

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
2 3311
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: shreddie | last post by:
Could anyone assist with the following problem? I'm using JavaScript to hide/show table rows depending on the option selected in radio buttons. The script works fine in IE but in Firefox the...
7
by: Daniel Kaplan | last post by:
I have the item below at the top of my style sheet. And it seems that the font-szie is ignored. I know that my linked style sheet is being read, and used because if I remove the font-family line,...
1
by: RonY | last post by:
I have a dropdown which calls SetTimePeriod method on change the selection. In the JS function, I reset the field style.display based on what the selection is. This works fine with IE but not working...
1
by: rbinington | last post by:
Hi, I am trying to write a DNN module that has the ability to insert articles into an article repository. I want the users to be able to move pages around and enter text into the FCKEditor. I...
15
by: cssExp | last post by:
hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...
3
by: Danigan | last post by:
I could about swear this was working perfectly while I was adding some other functionality somewhere else. I now removed that functionality and it doesn't work. If someone could find what I broke,...
1
by: jonathanellis | last post by:
Hello: I am having a problem with a web site that i built not showing up properly in IE6. I haven't tested it in IE7, but I have tested it in Firefox and Safari. Both Firefox and Safari show the...
7
by: zenbob | last post by:
Greetings, and thanks in advance for considering my problem. I am working in a basic .htm page, in which I want to close all displayed DIVs with one event. In IE, I find that this works: ...
4
by: PianoMan64 | last post by:
Hey Experts, I'm not sure how to get around this, and any help would be most greatfull. I have an issue with having a CSS menu that displays correctly in IE and not correctly in Firefox 3.0.3,...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.