PDA

Click to See Complete Forum and Search --> : div display in FireFox not working

benn_d
10-17-2005, 11:52 PM
Hi,

This is my first post to this site (but I often end up here to solve some problem or other, so for that I thank all contributors)... the time has come though where I have found a 'bug' that I cannot solve and cannot find a solution anywhere...

I have a (now) basic html file with 3 divs stacked on each other (similar in style to a table row), in each of these divs I have a link which when clicked hides (display: none) the clicked div and shows (display: block) a hidden div. This all works great, except in Firefox when I hide/unhide the top div I get a blank row appearing (roughly the same size as the correct row), this does not occur on any of the other rows (nor at all in IE). All rows are exactly the same (beside id) and the issue always occurs on the top div (even if I swap the order around).

The really strange this thing is that in the JS function that I use to hide/unhide divs if I put an alert between the two display actions it all works! My theory is that I think that the pause during the alert allows firefox to catch up with itself and align the divs correctly, take out the alert though and its all mucked up again!

Here is the complete code (no external links)...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Test Page</title>

<script type="text/javascript">
function toggleDiv(show, hide)
{
document.getElementById(hide).style.display = "none";
//alert( '...pause here...' );
document.getElementById(show).style.display = "block";
}
</script>

<style type="text/css">
.rowYellow
{
display: block;
width: 100%;
background-color: red;
margin: 5px 0px 5px 0px;
}
.rowBlue
{
display: none;
width: 100%;
background-color: lightblue;
margin: 5px 0px 5px 0px;
}
</style>
</head>

<body>
<div class="rowYellow" id="rowYellow_1" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_1', 'rowYellow_1' )"><b>+</b></a>
</div>
<div class="rowBlue" id="rowBlue_1" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_1', 'rowBlue_1' )"><b>-</b></a>
</div>

<div class="rowYellow" id="rowYellow_2" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_2', 'rowYellow_2' )"><b>+</b></a>
</div>
<div class="rowBlue" id="rowBlue_2" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_2', 'rowBlue_2' )"><b>-</b></a>
</div>

<div class="rowYellow" id="rowYellow_3" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_3', 'rowYellow_3' )"><b>+</b></a>
</div>
<div class="rowBlue" id="rowBlue_3" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_3', 'rowBlue_3' )"><b>-</b></a>
</div>
</body>

</html>

if anyone has seen this before or knows a way around it I would love to know!!!!

Thanks
Benn
Kravvitz
10-18-2005, 12:23 AM
That's an odd bug. You should report it. (https://bugzilla.mozilla.org/)

The bug seems to go away if there is another element before those.

If you need to you can make a dummy hidden element.
<div style="height:0;overflow:hidden;visibility:hidden;">&nbsp;</div>

The overflow:hidden is needed because of IE's incorrect way of handling the height property.
benn_d
10-18-2005, 01:02 AM
Thanks for the workaround.

Bug logged on bugzilla - https://bugzilla.mozilla.org/show_bug.cgi?id=312795.

Will await the response from the FF dev teams...

Cheers
Benn
bokeh
10-18-2005, 04:21 AM
I don't like the above solution too much :mad: (Adding html markup to correct a javascript handling error in my opinion is not the best way of dealing with things). I personally would use something like this and call it at the end of your function:

function nudgeFirefox(){
/* sort out a height problem in firefox */
document.getElementsByTagName('body')[0].style.width='99%';
document.getElementsByTagName('body')[0].style.width='auto';
}

Here's the whole thing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test Page</title>
<script type="text/javascript">
function toggleDiv(show, hide) {
document.getElementById(hide).style.display = "none";
//alert( '...pause here...' );
document.getElementById(show).style.display = "block";
nudgeFirefox();
}

function nudgeFirefox(){
/* sort out a height problem in firefox */
document.getElementsByTagName('body')[0].style.width='99%';
document.getElementsByTagName('body')[0].style.width='auto';
}
</script>
<style type="text/css">
.rowYellow {
display: block;
width: 100%;
background-color:
red; margin: 5px 0px 5px 0px;
}
.rowBlue {
display: none;
width: 100%;
background-color: lightblue;
margin: 5px 0px 5px 0px;
}
</style>
</head>
<body>
<div class="rowYellow" id="rowYellow_1" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_1', 'rowYellow_1' )"><b>+</b></a>
</div>

<div class="rowBlue" id="rowBlue_1" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_1', 'rowBlue_1' )"><b>-</b></a>
</div>

<div class="rowYellow" id="rowYellow_2" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_2', 'rowYellow_2' )"><b>+</b></a>
</div>

<div class="rowBlue" id="rowBlue_2" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_2', 'rowBlue_2' )"><b>-</b></a>
</div>

<div class="rowYellow" id="rowYellow_3" style='display: block;'>
<a href="#" onclick="toggleDiv( 'rowBlue_3', 'rowYellow_3' )"><b>+</b></a>
</div>

<div class="rowBlue" id="rowBlue_3" style='display: none;'>
<a href="#" onclick="toggleDiv( 'rowYellow_3', 'rowBlue_3' )"><b>-</b></a>
</div>
</body>
</html>
Kravvitz
10-18-2005, 01:34 PM
Thanks for the workaround.

Bug logged on bugzilla - https://bugzilla.mozilla.org/show_bug.cgi?id=312795.

Will await the response from the FF dev teams...

You're welcome :)

They responded.

I forgot that bugs in FF1.0.x should be tested in the most recent development version of FF1.5, which is currently beta 2, before posting the bug.

The bug is not present in FF1.5 beta 2.
benn_d
10-18-2005, 06:48 PM
Thanks for the work arounds guys, the Moz dev guys responded with "it is fixed in 1.5", however in private discussions .... it was previously undocumented however may have been related to a bigger issue with display styles across a broader range of things. Either way it is fixed in 1.5 and I have a workaround for 1.x ... so i'm happy!

thanks again.
Benn
drhowarddrfine
10-18-2005, 07:22 PM
You should report it.
the Moz dev guys responded
Less than 24 hours. Try and get that done with IE. :)