[JavaScript/DOM/IE7] Elements in DOM-tree niet zichtbaar

[Feyd-Rautha]

Ik heb een javascript die mijn DOM-tree manipuleert. Dit script creeert namelijk enkele basic elementen: DIV en TABLE en kent er enkele attributen aan toe.

Het probleem is dat in Firefox dit script correct wordt uitgevoerd en dat de output ook goed is, maar IE7 gaat hier de mist in. ( in IE8 werkt ook alles naar behoren ).

Wanneer ik de DOM-tree bekijk, zie ik dat alle elementen wel aanwezig zijn, maar toch niet getoond worden. Is dit een gekende bug in IE7 ?
Ter informatie: ik gebruik prototype om mijn DOM-tree te manipuleren.

Hieronder wat code + info:

JavaScript:

function generate(height, position, data, parentContainer)
{
    var nodeWidth = ...
    var restWidth = ...
    ...
    generateTableHeaders(height, parentContainer, nodeWidth);   
    generateTable(0, height, position, normalizedData, parentContainer, nodeWidth, restWidth);
}

function generateTableHeaders(height, parentContainer, nodeWidth)
{
    for (var i=0; i<=height; i++)
    {       
        var DIV_header = new Element("div", {"id":"header_" + i});
        var H3 = new Element("h3");     
    
        DIV_header.addClassName("knockoutTableHeader");     
        DIV_header.setStyle({"float":"right", "width":nodeWidth + "px"});
        
        H3.insert((i==0) ? "finale" : "1/" + Math.pow(2, i) + " finale");
        DIV_header.insert(H3);
        parentContainer.insert(DIV_header);
    }
    
    var DIV_cleaner = new Element("div");
    DIV_cleaner.addClassName("cleaner");
    parentContainer.insert(DIV_cleaner);    
}

function generateTable(level, height, position, data, parentContainer, nodeWidth, restWidth)
{   
    if (level == height) 
    {
        // at bottom of the tree 
        generateNode(position, data, parentContainer, nodeWidth + restWidth);
    }
    else 
    {
        generateLeft(level+1, height, position + '0', data, parentContainer, nodeWidth, restWidth);
        generateNode(position, data, parentContainer, nodeWidth);
        generateRight(level+1, height, position + '1', data, parentContainer, nodeWidth, restWidth);
    }
}

function generateRight(level, height, position, data, parentContainer, nodeWidth, restWidth)
{
    // container for right-tree 
    var DIV_right = new Element("div", {"id":"right_" + level});
    DIV_right.addClassName("right");
    DIV_right.setStyle({"float":"left", "width":restWidth + "px"});
                
    //create right-table into this new container
    generateTable(level, height, position, data, DIV_right, nodeWidth, restWidth - nodeWidth);
    
    // place the container in its parent-container 
    parentContainer.insert(DIV_right);      
}

Het javascript zal recursief een "knockout-table" genereren mbv DIV en het float-attribuut. Hierboven wordt een fragment uit dit script getoond.
De generate functie wordt in mijn HTML file geinvoked.
Initieel is de parentContainer is gewoon een DIV element dat reeds in mijn HTML pagina's zit. Verder in de recursie zal de parentContainer steeds een gecreeerde DIV-element (left / right) worden.

Het vreemde hierbij is ook dat IE7 wel de elementen die in de generateTableHeaders functie worden gecreeerd wel weergeeft, maar niet de elementen in de generateTable functie. Deze functie maakt de headers: "finale" / "1/2 finale" / ...

De output in FF & IE8 is:


De output in IE7 is:


De DOM-tree is wel degelijk correct in IE:

[Feyd-Rautha]

Niemand die mij een duw(tje) in de goede richting kan geven ? :-)

[crisp]

Kan je een linkje posten naar een werkende testcase?

[Feyd-Rautha]

Zeker:

Je kan eens surfen naar http://www.thenewcrucible.be en dan navigeren naar:

clubkampioenschap 2009-2010 > resultaten > sub-tornooi HT

[Feyd-Rautha]

Heeft er iemand reeds een lumineus idee gehad ?
Ik heb mijn javascript volledig met prototype geimplementeerd omdat ik dan dacht dat dit wel op iedere browser zou werken. Helaas...

Ik heb ook reeds een link op het Internet gevonden die dit probleem meer of min beschrijft, maar daarin stond dat dit te wijten was aan de "setAttribute" functie die niet werkte. Maar aangezien er in de "generateTableHeader" functie ook attributes gezet worden, kan het toch daaraan niet liggen?

Indien er nog meer informatie nodig is, laat maar weten.

[crisp]

Ik heb er nog niet naar kunnen kijken, maar mijn eerste ingeving is dat je last hebt van 'peekaboo' oid; een bug die in IE6 veel (en soms nog in IE7) voorkomt. Dat wil zeggen dat je floats niet goed gerendered worden waardoor ze onzichtbaar blijven. Hoe het op te lossen is is meestal een beetje afhankelijk van de algehele styling. Je kan in ieder geval confirmeren of het aan je styling ligt door eens te kijken of zonder styling je content wel zichtbaar is.