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