[TechnoBear]

I am having an issue with Internet Explorer (go figure). I have some code in a javascript file as it is on every page of the website and this made it easier to make changes across the board. I do this in a few different places and this is the only issue. It is with regards to the header at www.wazufm.org. the header is built as so:

document.write('<table class="header">');
document.write('<tr>');
document.write('<td width="420px">');
document.write('<a href="/"><img align="center" id="image1" src="/images/WAZURadioLogo.png" title="Home" /></a>');
document.write('</td>');
document.write('<td>');
document.write('<h1 align="center">"Occupying<br/>The Airwaves"</h1>');
document.write('</td>');
document.write('<td width="500px" align="center">');
document.write('<script type="text/javascript" src="/rand.js"></script>');
document.write('</td>');
document.write('</tr>');
document.write('</table>');

The problem occurring in IE (only) is that the randomized quote displays underneath the header as opposed to on the right hand side of the header as is intended and as it does in every other browser.

How do i fix this?

Edit:
The code for the randomized quote is:

var quotes = new Array('"Music is the electrical soil in which the spirit lives, thinks and invents." -Ludwig van Beethoven','"Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything." - Plato','"Music is the shorthand of emotion." - Leo Tolstoy','"The best time to plant a tree was 20 years ago. The second best time is now." - Chinese Proverb','"Remember not only to say the right thing in the right place, but far more difficult still, to leave unsaid the wrong thing at the tempting moment." - Benjamin Franklin','"Once you get people laughing, they are listening and you can tell them almost anything." - Herbert Gardner','"Never before the advent of radio did advertising have such a golden opportunity to make an ass out of itself. Never before could advertising be so insistent and so unmannerly and so affront its audience." - William J. Cameron','"I have found that luck is quite predictable. If you want more luck, take more chances. Be more active. Show up more often." - Brian Tracy','"I wrote a song, but I cannot read music. Every time I hear a new song on the radio I think, "Hey, maybe I wrote that."" - Stephen Wright','"New York: the only city where people make radio requests like "This is for Tina - I am sorry I stabbed you" - Carol Leifer','"it\'s wrong to create a mortgage-backed security filled with loans you know are going to fail so that you can sell it to a client who isn\'t aware that you sabotaged it by intentionally picking the misleadingly rated loans most likely to be defaulted upon" - Anon','"The trouble with quotes on the Internet is you never know if they are genuine" - Abraham Lincoln','Those who do not do politics will be done in by politics." - French Proverb','"Never worry about theory as long as the machinery does what it\'s supposed to do" - Robert A. Heinlein','"Most people go to their graves with their best music still inside them" - Oliver Wendell Holmes','"There are three principal ways to lose money: wine, women, and engineers. While the first two are more pleasant, the third is by far the more certain." - Baron Rothschild','"People were created to be loved, things were created to be used. The reason why the world is in chaos is because things are being loved, and people are being used." - Anon','"The two most important days in your life are: the day you are born, and the day you find out why." - Mark Twain','"Everyone is a genius. But if you judge a fish on it\'s ability to climb a tree, it will live it\'s whole life believing that it is stupid" - Albert Einstien');
var max = quotes.length;
var num = Math.floor((Math.random() * max));
document.writeln(quotes[num]);

This post has been edited by TechnoBear: 30 January 2012 - 03:46 PM

[Atli]

If you look at the DOM tree in the IE developer tools (F12), you see something like this:



Note the position of the Text node with your quote. It seems that IE is not loading and executing the <script> tag in your document.write before it moves on to the next one, which places the text node it creates outside the table. You may be better of loading this random quote generator first, in the header, wrapped in a function so that when this is called, you can call the function instead of adding the <script> tag. - Based on the code you posted, you could alter your "rand.js" file to look like this:

var quotes = new Array('...', '...');
function getRandomQuote() {
    // Copying values into variables is pointless when
    // you only use them once.
    return quotes[Math.floor((Math.random() * quotes.length))];
}

So that now it won't print the quote, it will simply provide a function to return a random quote. You can use that in your other Javascript files as a way to get the quote, which you would then write out.

// Instead of
document.write('<script type="text/javascript" src="/rand.js"></script>');

// You would do this:
document.write(getRandomQuote());

// This is assuming, of course, that the "rand.js" file
// has already been loaded in the <head>, before this
// code is called!

---

However, to be honest, your reliance on document.write is a bit "old-school". It works for the most part, but the more "modern" method is waiting until the DOM is ready and then manipulate it. For example, consider this example. It does pretty much the same thing your header-generating Javascript code is doing, except the header-generating code in this example is not executed until the page is ready to be manipulated.

<!DOCTYPE html>
<head>
    <title>Example</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="rand.js"></script>
    <script type="text/javascript">
    (function() {        
        // A function to create your header.
        var createHeader = function() {
            // Instead of using document.write, build the HTML
            // in Javascript and then add it to the DOM.
            var headStr = '\
                <table class="header">\
                    <tr>\
                        <td width="420px">\
                            <a href="/"><img align="center" id="image1" src="/images/WAZURadioLogo.png" title="Home" /></a>\
                        </td>\
                        <td>\
                            <h1 align="center">"Occupying<br/>The Airwaves"</h1>\
                        </td>\
                        <td width="500px" align="center" id="random-quote">\
                            ' + getRandomQuote() + '\
                        </td>\
                    </tr>\
                </table>';
            
            // Get a reference to the <div> placeholder element,
            // place in the DOM where the header should be.
            var headContainer = document.getElementById("head-container");
            
            // And then add the HTML string to it.
            headContainer.innerHTML = headStr;
        }
        
        // Make the browser listen for the event triggered when
        // the DOM is ready, and then trigger the function.
        if (window.addEventListener) {
            window.addEventListener("DOMContentLoaded", createHeader, false);
        }
        else {
            // This is for old IE versions. They use a non
            // standard event model.
            window.attachEvent("load", createHeader);
        }
    })();
    </script>
</head>
<body>
    <div id="head-container"></div>
</body>

This can also be simplified greatly by using a library like jQuery:

<!DOCTYPE html>
<head>
    <title>Example</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="rand.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#head-container").html('\
            <table class="header">\
                <tr>\
                    <td width="420px">\
                        <a href="/"><img align="center" id="image1" src="/images/WAZURadioLogo.png" title="Home" /></a>\
                    </td>\
                    <td>\
                        <h1 align="center">"Occupying<br/>The Airwaves"</h1>\
                    </td>\
                    <td width="500px" align="center" id="random-quote">\
                        ' + getRandomQuote() + '\
                    </td>\
                </tr>\
            </table>');
    });
    </script>
</head>
<body>
    <div id="head-container"></div>
</body>

The downside with this is that there *may* be a few milliseconds where the header could be noticeably absent, especially in the old IE versions where the "load" event is used instead of "DOMContentLoaded". You could go he middle ground to avoid this, by writing out the "static" HTML with your document.write files, and then fill in the dynamic bits when the page loads.

/** File: header.js **/
document.write('\
<table class="header">\
    <tr>\
        <td width="420px">\
            <a href="/"><img align="center" id="image1" src="/images/WAZURadioLogo.png" title="Home" /></a>\
        </td>\
        <td>\
            <h1 align="center">"Occupying<br/>The Airwaves"</h1>\
        </td>\
        <td width="500px" align="center" id="random-quote"></td>\
    </tr>\
</table>');

<!DOCTYPE html>
<head>
    <title>Example</title>
    <meta charset="UTF-8"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="rand.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#random-quote").html(getRandomQuote());
    });
    </script>
</head>
<body>
    <script type="text/javascript" src="header.js"></script>
</body>

And, as a final note. Personally I hate code that mixes languages, like my examples there that have Javascript inside HTML. Or even worse, HTML inside Javascript inside HTML. - I would use document.createElement to generate the elements I wanted to add to the page, and then use the DOM to put them where they belong. It can get a bit verbose, but it's much more flexible. Worth checking out, at least.