style problemer ved js-menu

Harj

Jeg har brugt meget meget meget tid her siden jul til at bikse min egen js-menu op fra bunden. Den er endelig ved at være færdig - men er stødt ind i nogle mærkelige problemer med hvordan tablerow elementer opfører sig i forskellige browsere.

Min menus består af undermenuer - div's der indeholder et table med alle knapperne i - hver knap består af af en tablerow med tre celler.

Koonkrete problemer:

1. Firefox sætter bredden af tablerow'en og tablebody'en til et tal som må forstås som "uendeligt" - noget a la 7.89e8 - og tilpasser sig ikke indholdet i tablerow'en!!
selve table-elementet gør dog dette og jeg har derfor undgået problemet på den måde - men vil gerne have en forklaring.

2. Div'et tilpasser sig heller ikke indholdet - eller rettere kun delvist! Dette har jeg så også overkommet ved at sætte div'ets bredde til samme bredde som table't - ikke en smart løsning der giver nogle problemer senere. Dette både i IE og FF

3. Jeg har prøvet at style menuen - efter dette kan IE ikke finde ud af at sætte bredden af nogle af cellerne, de forbliver bare smalle - og vel at mærke kun i nogle af table'sne!!


Jeg har tjekket den html der udskrives igennem 1000 gange - og der er ikke nogen fejl dér - alt opfylder vist xhtml standarderne!

Håber der er nogle der måske har nogle svar!

Koden til menu er nok for omfattende til at smide op her - men koden der indsætter et div med et table og den efterfølgende kode der placerer div'et er følgdene:

-- Udsnit af kode --
var str = "";
    str += "<div id='"+name+"_menu"+this.id+"' class='"+name+"_menuClass' style='position: absolute; visibility: hidden;' ";
    str += "onMouseOver='"+name+".menuMouseOver(\""+this.id+"\");' onMouseOut='"+name+".menuMouseOut();' >";
    str += "<table border=0 cellpadding=0 cellspacing=0>";
    for (var i = 0; i<this.menuItems.length; i++) {
        if (this.menuItems[i].type == "menu") {
            this.addSubMenu(this.menuItems[i], this.id+"_"+i, i);
            str += this.menuItems[i].item.draw();
        } else if (this.menuItems[i].type == "item") {
            str += this.menuItems[i].draw();
        }
    }
    str += "</table>";
    str += "</div>";
-- Udsnit slut --

--Udsnit af kode--
var currentDiv = this.menubar.getElement(this.menubar.name+"_menu"+this.id);
    var td = currentDiv.firstChild.firstChild.firstChild;
    if (this.parentMenu) {
        var parentDiv = this.menubar.getElement(this.menubar.name+"_menu"+this.parentMenu.id);
        var tr = parentDiv.firstChild.firstChild.childNodes[this.itemNum];
        currentDiv.style.top = this.menubar.getElementOffsetTop(tr)-this.menubar.worldy;
        // Her nogle grimme fejl i Mozilla - brug offsetWidth på <table> i stedet for <tr>
        currentDiv.style.left = this.menubar.getElementOffsetLeft(tr)+parentDiv.firstChild.offsetWidth-this.menubar.worldx;
    }
    if(this.menubar.browser == "IE"){
        var td = currentDiv.firstChild.firstChild.firstChild;
        currentDiv.style.width = td.childNodes[0].offsetWidth+td.childNodes[1].offsetWidth+td.childNodes[2].offsetWidth;
    }else{
        currentDiv.style.width = currentDiv.firstChild.offsetWidth;
    }
-- Udsnit slut --


Menuen kan ses her: http://www.desi-dev.dk/filip/js_MenuBar/MenuBarTest.html
styles her: http://www.desi-dev.dk/filip/js_MenuBar/menu_styles.css
script her: http://www.desi-dev.dk/filip/js_MenuBar/MenuBar.js


/Pyroman