JavaScript reading CSS values

    Date: 08/05/05 (Javascript Community)    Keywords: css, java

    I'm having some problems with JavaScript reading the values for divs that I set in a CSS file. The JavaScript worked before when I had the style information in the div tags, but now that I've moved it into a separate CSS file it no longer works, at least not in Firefox 1.0.6.

    The JavaScript functions:

    function fnMirrorPanes()
    {
    	var varDivs = new Array('pane_main', 'pane_info', 'pane_cluster', 'pane_quadrant', 'pane_starsystem', 'menu_main', 'menu_navigation', 'menu_interface', 'alert_mail', 'alert_forum', 'alert_combat');
    	
    	for (x in varDivs)
    	{
    		xLeft(varDivs[x], (640 - xWidth(varDivs[x]) - xLeft(varDivs[x])));
    	}
    }

    xLeft and xWidth are part of the X Library.

    The CSS code:

    /* General */
    #menu_main, #menu_navigation, #menu_interface, #pane_main, #pane_info, #pane_cluster, #pane_quadrant, #pane_starsystem, #alert_mail, #alert_forum, #alert_combat {
    	position: absolute;
    	margin: 0px;
    }
    #menu_main, #menu_navigation, #menu_interface, #pane_main, #pane_info, #pane_cluster, #pane_quadrant, #pane_starsystem {
    	visibility: visible;
    }
    #menu_main, #menu_navigation, #menu_interface, #pane_main, #alert_mail, #alert_forum, #alert_combat {
    	border: 0px;
    }
    #alert_mail, #alert_forum, #alert_combat {
    	visibility: hidden;
    }
    
    /* Menus */
    #menu_main {
    	top: 270px;
    	left: 52px;
    	width: 79px;
    	height: 79px;
    }
    #menu_navigation {
    	top: 249px;
    	left: 39px;
    	width: 105px;
    	height: 21px;
    }
    #menu_interface {
    	top: 367px;
    	left: 145px;
    	width: 21px;
    	height: 84px;
    }
    
    /* Main and Info panes */
    #pane_main {
    	top: 15px;
    	left: 175px;
    	width: 450px;
    	height: 328px;
    }
    #pane_info {
    	top: 15px;
    	left: 15px;
    	width: 145px;
    	height: 230px;
    }
    
    /* Maps */
    #pane_cluster, #pane_quadrant, #pane_starsystem {
    	top: 357px;
    	width: 105px;
    	height: 105px;
    }
    #pane_cluster {
    	left: 28px;
    }
    #pane_quadrant {
    	left: 175px;
    }
    #pane_starsystem {
    	left: 292px;
    }
    
    /* Alerts */
    #alert_mail, #alert_forum, #alert_combat  {
    	width: 25px;
    	height: 25px;
    }
    #alert_mail {
    	top: 297px;
    	left: 79px;
    }
    #alert_forum {
    	top: 271px;
    	left: 105px;
    }
    #alert_combat {
    	top: 271px;
    	left: 79px;
    }
    
    #pane_main, #pane_info, #pane_cluster, #pane_quadrant, #pane_starsystem {
    	background-color: transparent;
    }

    I've had one person suggest using