IE not applying base to background image definitions in css

Question

IE (tested 7-10) is not applying the base (an absolute URL) to background images within a style tag, resulting in 404. This only happens when the code is injected using innerHTML (a requirement of the larger application this belongs to). It applies the base to all other elements as seen in the example.

Any suggestions?

Edit 2014/01/13 This is fixed if I remove the style tags from the HTML string and manually append them to the header. Would like to know if this is the only answer. Based upon this solution: How to create a <style> tag with Javascript

<!DOCTYPE html>
<html>
    <head>
        <title>base test</title>
        <base href="http://absoluteurl.com/">
    </head>
    <body>
        <div id="container"></div>
    </body>
    <script>
        var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
        document.getElementById('container').innerHTML = html;
    </script>
</html>

score 0 · Answer 1 · answered Jan 13 '14 at 17:49

0

Have you tried the jQuery appendTo method?

answered Jan 13 '14 at 17:49

Dylan

495
1
6
19

There are larger issues with jQuery that prevent us from us it, even through the library is used throughout the application. – scader Jan 13 '14 at 18:09

score 0 · Answer 2 · answered Jan 14 '14 at 16:52

Inline style elements have to be removed from the HTML string, added to a style element object, and then appended to the head.

<!DOCTYPE html>
<html>
  <head>
    <title>base test</title>
    <base href="http://absoluteurl.com/">
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
    var head = document.getElementsByName('head')[0];
    content.html = content.html.replace(/<style(.|\n)*?>(.|\n)*?<\/style>/ig, function(match) {
      var css = match.replace(/<\/?style(.|\n)*?>/ig, "");
      style = document.createElement('style');
      style.type = 'text/css';
      if(style.styleSheet){
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
      head.appendChild(style);
      return "";
    });
    document.getElementById('container').innerHTML = html;
  </script>
</html>

IE not applying base to background image definitions in css

2 Answers2