Document.getElementById & IE7

JavaScript
1

http://nupper.heliohost.org/the_clay_guys/

I’m using a single line in the HEAD section

<script type="text/javascript">document.getElementById('customcss').href = "css/base.css";</script>

to load a CSS file should the browser not be JS capable.

Only in IE 7 will this not render and I’m going bonkers trying to figure it out.

After searching a bit I ensured no ID and NAMEs were similar and I don’t think it’s a hasLayout bug.

If I remove that one line of script then the site renders fine.

Any ideas? :bomb:

2

Okay, well it seems to load for me in the IETester version of IE7. Does anyone else have a native IE7 that they can check this on?

3

What’s got me worried is that IE NetRenderer will only load the page on IE7 if I remove that one <script> line. I’d give my left you-know-what for a pure-blood IE7 test.

4

The default CSS file will load (no_js.css) but if JS capability is present then the JS will load base.css instead.

5

I don’t think that I’m following you correctly. Where the client cannot do JS, you are using JS to load an alternative CSS file? I don’t think that is capable of working.

6

Link tags are not valid in the body of the page - they are only valid in the head of the page.

Conversely noscript tags are only valid in the body and not in the head.

A better solution is to have a stylesheet in the head that applies the styles you want for when JavaScript is not available and then use JavaScript to update the specific styles that need to be changed.

7

Thanks a million! I will give this a shot :smiley:

8

I changed the script to a more conventional approach, using document.write for the base.css and <noscript> for the no_js.css. It works fine for all browsers as long as the page is actually on the interrnet. If you do it locally it doesn’t work for IE. I don’t know why this should be so.

This script loads a black background when javascript is operating and a red background when javascript is disabled. I have included the CSS pages below the script here.

I have uploaded the pages to the internet for viewing. Try it with and without javascript enabled in all browsers.

http://www.grafwebdesign.com/a101007_2.htm

// ========== main page ===============
<html>

<head>

<title>Changing CSS</title>
<script type=“text/javascript”>
<!–
document.write(‘<link rel=“stylesheet” href=“base.css” type=“text/css” media=“screen”>’);
//–>
</script>
</head>

<body id=“customcss”>

<noscript>
<link rel=“stylesheet” href=“no_js.css” type=“text/css” media=“screen”>
</noscript>

</body>

</html>

// =============
base CSS file

/* -------- test css ------------------- */
body { background-color:#000; }

// =============
no_js CSS file

/* -------- test css ------------------- */
body { background-color:#F00; }

// ==== end =============

9

I downloaded IETester and the page will refuse to load in any version of IE. It will remain a blank page, but if you “View Source” the entire code shows up. If I “wiggle” the page with using the Back and Forward buttons and smashing refresh it sometimes shows up, but obviously this is causing some major problems.

It’s clear that it’s that one line of inline JS in the HEAD section, but is the code itself faulty and inadvertently sending IE on an endless loop?