Fixed positioning an ad in IE

Can skip to the edit for a more up to date explanation.

I can't seem to set an ad that gets written out via document.write() to a fixed position. It works fine in all other browsers besides IE, and that includes IE9.

Here is an example: http://htinteractive.com/bottom_bar/demo.html

Any suggestions woul开发者_开发技巧d be highly appreciated. I'm running out of ideas.

Thank you.

Edit:

I've narrowed the problem down to the following IE issue I'm having. To simplify it down...

<style type="text/css">
    #temp1
    {
        position:fixed; 
        bottom:0; 
        height:100px; 
        width:100px; 
        border:solid 2px red;
    }
</style>

<!--WORKS IN IE-->
<div id="temp1">
    <script type="text/javascript">
        document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
    </script>
</div>


<!--FAILS TO FIX POSITION IN IE-->
<script type="text/javascript">
    document.write('<div id="temp1">');
    document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
    document.write('</div>')
</script>

Anyways, I really need the 2nd method to work, and I'm pulling my hair out trying to figure out how.

Thanks.

Maybe IE needs the temp1 DIV to be ended before writing the script element:

<script type="text/javascript">
    document.write('<div id="temp1"><' + '/div>');
    document.write("<scr" + "ipt type=\"text/javascript\">\nif(typeof(cachebuster) == \"undefined\"){var cachebuster = Math.floor(Math.random()*10000000000)}\nif(typeof(dcopt) == \"undefined\"){var dcopt = \"dcopt=ist;\"} else {var dcopt = \"\"}\nif(typeof(tile) == \"undefined\"){var tile = 1} else {tile++}\ndocument.write('<scr'+'ipt src=\"http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?\"></scr'+'ipt>');\n</scr" + "ipt>");
</script>

EDIT (in response to your comment):

Since you want the ad script to go inside the div, you will have to put document.write aside and create the script programmatically, so you can simply call appendChild to put it into the div:

<script type="text/javascript">
    document.write('<div id="temp1"><' + '/div>');
    if(typeof(cachebuster) == "undefined") {
        var cachebuster = Math.floor(Math.random() * 10000000000);
    }
    if(typeof(dcopt) == "undefined") {
        var dcopt = "dcopt=ist;";
    } else {
        var dcopt = "";
    }
    if(typeof(tile) == "undefined") {
        var tile = 1;
    } else {
        tile++;
    }    
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;"
        + dcopt 
        + ";tile=" + tile
        + ";sz=728x90;ord=" + cachebuster + "?";
    divTemp.appendChild(script);
</script>

Please note that I cannot be 100% sure I did not make some typo while reformatting the script, with all those escaped sequences...

Not tested, but seems like it should work:

<script>
(function(){
  var w = window,
    d = document,
    s = d.createElement('script'),
    div = d.createElement('div'),
    el = [].slice.call(d.getElementsByTagName('script'), -1),
    baseUrl = 'http://ad.doubleclick.net/adj/shz.bloomington/home;pos=728x90_1;';
  // end var block

  if(!("cachebuster" in w)){
    cachebuster = Math.floor(Math.random()*10000000000);
  }
  dcopt = "dcopt" in w ? "" : "dcopt=ist;";
  tile = "tile" in w ? tile+1 : 1;

  div.id = 'temp1';
  div.appendChild(s);
  el.parentNode.inserBefore(div, el);
  s.src = baseUrl + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?';

})();
</script>

It looks like the script tags are not embedding the ad inside your DIV as you would expect. According to IE Developer tools, the ad is outside of your DIV and therefore doesn't get the positioning.

Using your example code changing #temp1 to just an A positions your ad where you want it.

The problem is just that your ad is not receiving the style. If you have the option of getting your ad to come back with an ID then you could probably base your style on that or alternatively use DOM manipulation to get your ad in the right spot.

The deeper issue, getting the ad script to render its content inside your DIV I'm just not sure about.

Update:

I believe the difference to IE is the method of using the SCRIPT tag. Using the src attribute to load script from another location seems to break the node tree.

Here's some evidence:

http://jsfiddle.net/wuqVw/1/

http://jsfiddle.net/wuqVw/2/

In the first example you can see that the ad is inside of the DIV whereas in the second it is below. There is probably some rule in IE that says SCRIPT tags with src attributes belong in the HEAD so it's putting them outside your DIV.

check to see if your HTML has DTD format

This resource might help

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/

You can also use browser specific hacks or you can specify a different document:

<!--[if lte IE 9]>

When writing script with an "src" attribute, some browsers parse the following inline code before actually running the external script. The result of the external script will be written outside of the div, because the inline code creates it, this was true for a lot of browsers a while back.

There's no simple way to overcome this, either put the div in the html, or in the external script.

What happens if you put following on top of your page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">