Dynamic CSS, another FF Vs IE 1

eddy9 · May 28, 2006

Hello,

Just out of interest, could someone tell me why the following code and script works fine on FF but not with IE,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Test Css</title>
<style type="text/css" media="all" id="mood">@import url("main.css");</style>
<style type="text/css">
.btn{
	border:groove gray 2px;
	background:black;
	color:white;
	text-align:center;
	cursor:pointer;
        width:100px;
	}
</style>
</head>
<body>
<div id="btnmood">
<div id="default" class="btn" onclick='mood("main");'>&nbsp;Normal&nbsp;</div>
<br />
<div id="dark" class="btn" onclick="mood(this.id);">&nbsp;Dark&nbsp;</div>

</div>
<script type="text/javascript">
function mood(m){
//alert(m);
var jj=document.getElementById('mood');
jj.innerHTML='@import url(\"' +m+ '.css\");';
  }
</script>
</body>
</html>

and main.css is

Code:

body{
	background:orange;
}

with dark.css being

Code:

body{
	background:darkblue;
}

and the example here -->

http://jj4.org/test.html

IE Error: "unknown runtime error" (as helpful as ever)

as I say it's more out of interest, if anyone knows,

Cheers.

OsakaWebbie · May 28, 2006

Well, I'm not the expert on browser implementation of Javascript, but a runtime error is always some script (not just HTML/CSS), and you only have two lines in your JS routine. The first is very normal access of a DOM element, but the second one (importing a CSS file) seems pretty bold, so I would suspect that. Have you commented that out and seen whether the error goes away? Obviously you want to get it working, but the first question is simply which line is the problem.

If the problem is indeed the import, and your CSS files are indeed just one line, I suggest simply specifying the body background in JS rather than trying to import a one-line file:

Code:

function mood(m){
var jj=document.getElementById('mood');
if (m="main") {
  document.body.bgColor="orange";
} else {
  document.body.bgColor="darkblue";
}

If this is just a test before doing something with lots of changes, or you want to change color schemes simply by swapping out files, then I guess you'll still need the external file. Here's a routine I found (on another forum [blush]

) to get the file in there by more standard Javascript code (I simplified it to the relevent parts):

Code:

var CSSAdd;
function AddCSS(name){
 head=document.getElementsByTagName('HEAD')[0];
 // next line removes the previously added StyleSheet
 if (CSSAdd){ head.removeChild(CSSAdd); }
 CSSAdd=document.createElement('LINK');
 CSSAdd.rel='stylesheet';
 CSSAdd.type='text/css';
 CSSAdd.href=name;
 head.appendChild(CSSAdd);
}

If I understand it right, in your case you would call the function once at load time with "main.css" as the parameter (rather than linking the CSS file directly in HTML), so that the CSSAdd variable gets set correctly. Use and modify as needed - I simply copy/pasted it here. I'd probably get in trouble for linking to another forum, but you can Google it just like I did if you want to see the context discussion.

eddy9 · May 29, 2006

Hi OsakaWebbie,
thanks for that info, I did do a second test using the external style link that works similar to your script which does work with IE, provided you add "height:100%" to the style sheet, that can be found/tested at

http://jj4.org/test2.html

and the code is,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Test Css</title>
<link rel="stylesheet" type="text/css" href="main.css" id="mood" />
<style type="text/css">
.btn{
	border:groove gray 2px;
	background:black;
	color:white;
	text-align:center;
	cursor:pointer;
	width:100px;
	}
</style>
</head>
<body>
<div id="btnmood">
<div id="default" class="btn" onclick='mood("main");'>&nbsp;Normal&nbsp;</div>
<br />
<div id="dark" class="btn" onclick="mood(this.id);">&nbsp;Dark&nbsp;</div>
</div>

<script type="text/javascript">
function mood(m){
document.getElementById('mood').href=m+ '.css';
  }
</script>
</body>
</html>

My initial interest is why it would work with link but not with import, but as you say if this is a javascript error then I'm in the wrong forum.

Thanks again

OsakaWebbie · May 29, 2006

Anytime.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic CSS, another FF Vs IE 1

eddy9

Programmer

OsakaWebbie

Programmer

eddy9

Programmer

OsakaWebbie

Programmer

Similar threads

Part and Inventory Search

Sponsor