external CSS is being stripped on IE when rendered using Javascript - 【StackMirror】|javascript|internet-explorer

I have this code below that is being rendered on websites via Javascript:

<div id="rs_overlay">
  <link type="text/css" rel="stylesheet" media="screen" href="CSS URL HERE">
  <div id="rs_content">

      <div id="rs_images">
        <div class="left">
          <div class="rs_image">
            <img height="161" src="http://www.dwellstudio.com/media/upload/image/35a1zki.jpg">
          </div>
        </div>
        <div class="rs_clear">
      <div>

  </div>
</div>

The overlay layout is working fine on webkit and moz browsers and IE9, however this is failing on IE8 and IE7 because the line

<link type="text/css" rel="stylesheet" media="screen" href="CSS URL HERE">

is being stripped out on IE7/8.

Any thoughts except for inline css?

2012-04-04 03:50
by RodM

<link> may appear only in the <head> block, not randomly in the document body. Your html is therefore invalid, and for a change, IE is doing the right thing to ignore it - Marc B 2012-04-04 03:52

And this has nothing to do with RoR - Mark Fraser 2012-04-04 03:55

As Marc B commented, <link> tags should be placed in <head>. Your script should create the <link> element and append it there.

Example:

var head = document.getElementsByTagName('head').item(0);
var elem = document.createElement('link');
elem.type = 'text/css';
elem.rel = 'stylesheet';
elem.href = "CSS URL HERE";
head.appendChild(elem);

2012-04-04 08:03
by Nikki Erwin Ramirez