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

Discussion in 'Javascript' started by Erwin Moller, Feb 17, 2006.

  1. Erwin Moller

    Erwin Moller Guest

    Hi group,

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

    - 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">
    Your age: <input type="text" name="age">

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


    - 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");'none';

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


    This works fine.
    I even passed the validation at
    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.

    Erwin Moller
    Erwin Moller, Feb 17, 2006
    1. Advertisements

  2. 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)).

    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

    You have not demonstrated that the problem exists, only described it.
    Generally no, IE is fine with making DIVs visible/invisible and
    displayed/not displayed.
    Probably, else IE would be pretty hopeless at DHTML.

    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 Cornford, Feb 18, 2006
    1. Advertisements

  3. Erwin Moller

    Erwin Moller Guest

    Richard Cornford wrote:


    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.

    Erwin Moller
    Erwin Moller, Feb 21, 2006
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.