external CSS is being stripped on IE when rendered using Javascript

Question

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?

<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
– Marc B, Commented Apr 4, 2012 at 3:52

Nikki Erwin Ramirez · Accepted Answer · 2012-04-04 08:03:06Z

1

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

answered Apr 4, 2012 at 8:03

Nikki Erwin Ramirez

10k6 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

external CSS is being stripped on IE when rendered using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related