CODEWITHSUNDEEP
javascriptinternet-explorer
RodM
RodM

Reputation: 426

external CSS is being stripped on IE when rendered using Javascript

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?

Upvotes: 0

Views: 190

Answers (1)

Nikki Erwin Ramirez
Nikki Erwin Ramirez

Reputation: 9924

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);

Upvotes: 1

Related Questions