Image

Imagezimzat wrote in Imagejavascript 😟disappointed

JavaScript reading CSS values

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 <style type="text/css"> @import "file.css"; <style> however it didn't work, unless I did something wrong.



The only way I can think of is to put the dimensions back in the div tag or to hard-code the new positions, however I'd rather not do that.

LJ Video