Javascript and div's with style.display=none or block bugging in IE 5.5 and 6.0

[Erwin Moller]

Hi group,

I have this obscure problem that really needs to be fixed, but I am out of
ideas.
Because the original script is very big, I'll try to summarize its
functionality.

Setup:
- many form-elements that will 'activate' a part of the form based on the
selection made.
eg: A SELECT that will display a different part of the form depending on the
selection made.

- I implemented this by creating div's with an unique id.
They are standard off, as in:
<div id="option34" style="display:none">
Your name: <input type="text" name="firstname">
<br>
Your age: <input type="text" name="age">
</div>

<div id="option35" style="display:none">
Question bla: <input type="text" name="q33">
<br>
Question blabla: <input type="text" name="q56">
</div>

etc.
- The change in the selection in the SELECT will fire a JS function that
will make:
1) all div's that belong to other selections invisible by stetting their
var myDiv = document.getElementById("option34");
myDiv.style.display='none';

2) all div's belonging to my desired part visible by:
var myDiv = document.getElementById("option35");
myDiv.style.display='block';
---------------

This works fine.
I even passed the validation at validator.w3c.org
My doctype is 'loose.dtd' (please don't make me type the whole thingy.)

My problem:
Sometimes IE5.5 and 6.0 don't do it right.
I do not get a JS-error or something, but after I made some div's invisible
and others visible, IE leave 'grey area's' behind.
Sometimes IE leaves pieces of the old form (now display='none') behind, and
it looks like it is indeed just a piece of the old screen because I cannot
'use' the elements, like using a formelement type="text".

(This never happens in Firefox.)

Does anybody know how I solve this?
Is IE buggy somehow with div's that are made visible and invisible?
Can I tell IE to render right somehow?
Is my approach wrong?

Thanks for your time.

Regards,
Erwin Moller

[Richard Cornford]

Erwin Moller wrote:

I have this obscure problem that really needs to be
fixed, but I am out of ideas.
Because the original script is very big, I'll try to
summarize its functionality.
It is rarely effective to attempt to solve browser-scripting problems
with a summary of what a script does. It is particularly ineffective if
the problem as described is not common, or cannot be attributed to a
single cause.

What is needed is a test case page that demonstrates the problem in
isolation. With such a page as a starting point experiments and tests
can be carried out by readers of the group and that process may (and
usually does) identify the cause of the issue. And when a test case
demonstrates a problem in isolation the result is usually short enough
to be posted to the group (and possibly also made available online for
those who prefer code presented in that form (or for test cases
involving images and/or frames, which don't lend themselves to posted
pure code)).

<snip> ... , IE leave 'grey area's' behind.
Sometimes IE leaves pieces of the old form
(now display='none') behind, ...
I have seen those symptoms attributed to faulty display drivers and/or
corrupted windows libraries, either of which can be tested/eliminated by
trying the offending page on alternative hardware on a different
machine.

<snip> Does anybody know how I solve this?
You have not demonstrated that the problem exists, only described it.
Is IE buggy somehow with div's that are made visible
and invisible?
Generally no, IE is fine with making DIVs visible/invisible and
displayed/not displayed.
Can I tell IE to render right somehow?
Probably, else IE would be pretty hopeless at DHTML.
Is my approach wrong?

<snip>

Yes, you need to create a test case page that demonstrates the problem.
A good starting point for that process is the page you already have that
exhibits the problem. If you eliminate parts of that page; unrelated
mark-up and css, as many of the form's DIVs as are not required to
produce the problem, all unrelated javascript, etc. you should end up
with something short and simple enough to post. And an interesting
consequence of trying to crate a good test case page is that if you
re-load and re-test the page while incrementally removing the apparently
superfluous you often discover that when you remove something you had
assumed to be unrelated to the issue the problem vanishes. At which
point you have learnt something useful about the problem at hand. This
is actually so effective that in probably more than 50% of cases the act
of creating a test case page will reveal the problem in itself, without
the need to refer the result on to others.

Richard.

[Erwin Moller]

Richard Cornford wrote:

<snip>

Thanks Richard.

I completely agree with you: Show the code.

This was in my situation just impossible because of a deadline.
The offending page was over 500K, and contained over 6000 lines of html and
javascript. I didn't want to throw such a monster in your/anybody's hands.

Cleaning the code to isolate the problem was just impossible for me at that
time (timewise).
This, of course, is/was my problem.

I hoped my description of the behaviour would ring some bells in this
community because they heard the story hundred times before and knew what I
did (probably) wrong.

However, the problem is solved by now.
After I made sure my code was W3C-compliant (DTD Loose/transitional), and
the problem still persisted, I started looking at other things.

It turned out the stylesheet I received contained some relatively placed
tables. Removing the relative-part made the problem disappear, while not
breaking the lay-out.
Don't ask me why: I do not know too much of stylesheets.

I just write it here so maybe it can help some googling soul someday tracing
a similar problem.

Thanks for your time.

Regards,
Erwin Moller