Home/ Questions/Q 7085683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:27:18+00:00

I have an ad code that I am embedding in a div and then

  • 0

I have an ad code that I am embedding in a div and then i am wrapping them all within a document.write. When I output it on a page, div remains in it’s position but contents of ad code are created elsewhere i.e bottom left corner of page. Previously i had posted wrong code, here’s the working code:

    <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">  
</script>
<style>
#pubToolbar{
    margin-left: 20%;
    width:700px;
    height: 90px;
    border: 2px solid #888;
    visibility: hidden;
}
</style>
</head>
<body>
<div id="pubToolbar">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;margin-left:72px;display:block;bottom:-120px;position:relative;border:2px solid #999\" class=\"cpa-campaign-white\">\n"); 
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=2384320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("</div>\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
    $('#pubToolbar_banner').css('display','block');
    $('#pubToolbar').css('visibility','visible');
    $('#pubToolbar').animate({bottom:0},1500,'swing');
</script>
</div>
</body>
</html>

The code within div is the code from an ad server named adtech. Now this is all within a wrapper div. Note, in this code, in first div of document.write I have given to the main wrapper ‘visibility:none’, to hide it initially on older browser.(Suggestion from Perry Tew).

But when I turn it’s visibility on, banner ad is rendered outside wrapper div. Thus is experienced on IE-6/7/8 and old versions of opera i.e 11.20 and older.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have already dealt with adtech and faced that very same issue in the past

    Your problem comes from the fact than in older versions of IE, a distant script tag written with document.write() will not assume the position in your dom of being right after the current script block which added it.

    So for exemple:

    Index.html

    <script type="text/javascript">
doSomething();
document.write("<scr"+"ipt type=\"text/javascript\" src=\"/something.js\">\n");
doSomething();
</script>

    something.js

    document.write('hello');

    In modern browsers, this is evaluated as (obviously things are more complicated than that, but for the sake of explanation):

    <script type="text/javascript">
doSomething();
</script>
<script type="text/javascript" src="/something.js">
<script type="text/javascript">
doSomething();
</script>

    Which ends up meaning:

    <script type="text/javascript">
doSomething();
document.write('hello');
doSomething();
</script>

    In the problematic browsers such as IE 7 however, it ends up as:

    <script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript" src="/something.js">

    And then

    <script type="text/javascript">
doSomething();
doSomething();
</script>
<script type="text/javascript">
document.write('hello');
</script>

    As a result, your pubToolbar_banner div is closed before the adtech tags actually run, so the tag is put outside of them, inside the pubToolbar div.

    Please note that this is an overly simplified explanation of the issue to make you understand what kind of problem is happening. In all honesty, I don’t remember all the details myself.

    Easiest solution ? Create your container div in a different script tag. For exemple try this code:

    <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<style>
#pubToolbar{
    margin-left: 20%;
    width:732px;
    height: 90px;
    border: 2px solid #888;
    visibility: hidden;
    display: none;
}
</style>
</head>
<body>
<div id="pubToolbar" style="background-color: red;">
<script type="text/javascript">
document.write("<div align=\"center\" id=\"pubToolbar_banner\" style=\"width:728px;height:90px;margin:0px auto;z-index:9999;display:block;bottom:-90px;position:relative;background-color: purple; border:2px solid #99\
9\" class=\"cpa-campaign-white\">\n");
</script>
<script type="text/javascript">
var section=3901;
var width=728;
var height=90;
var enc=1;
var clicktag="http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D";
var pop=0;
document.write("<scr"+"ipt type=\"text/javascript\" src=\"http://cdn.atomex.net/static/js/ads-min.js\">\n");
document.write("</scr"+"ipt>\n");
document.write("<noscript><iframe src=\"http://ads.atomex.net/cgi-bin/adserver.fcgi/ad?section=3901&width=728&height=90&enc=1&type=iframe&js=0&clickTag=http://adserver.adtechus.com/adlink/5359/2132703/0/2237/AdId=23\
84320;BnId=1;itime=542661387;nodecode=yes;link=http%3A//adserver.adtechus.com/adlink%2F5359%2F2132703%2F0%2F2237%2FAdId%3D2384320%3BBnId%3D1%3Bitime%3D542661387%3Blink%3D\" height=\"90\" width=\"728\" scrolling=\"no\
\" marginwidth=\"0\" marginheight=\"0\" frameborder=\"0\" ></iframe></noscript>\n");
document.write("\n");
document.write("\n");
document.write("\n");
document.write("\n");
var adcount_2132703_1_=new Image();
adcount_2132703_1_.src="http://adserver.adtechus.com/adcount/3.0/5359/2132703/0/2237/AdId=2384320;BnId=1;ct=3358222966;st=1276;adcid=1;itime=542661387;reqtype=5;";
// 034665b732c4e8a5a7992aeb7377c4b8
</script>
<script type="text/javascript">
document.write("</div>\n");
</script>
</div>
<script type="text/javascript">
  $(document).ready(function() {
    $('#pubToolbar').css('visibility','visible').fadeIn('slow', function() {
  $('#pubToolbar_banner').animate({ bottom:0 },"slow");
  });
});
</script>
</body>
</html>

    You need to put both the opening tag and the closing tag of you container in a different script block (such as in my example), if I had simply moved the closing tag out the issue would have remained. The technical reasons as to why are similars.

    This solution works for me on IE 6/7 and modern browsers, the ad appears inside the pubToolbar_banner div, which is itself inside the pubToolbar div. After page loading, pubToolbar_banner will slowly scroll up inside pubToolbar using animate.

    Let me know if that helps, and if not try to provide a screenshot of the issue.

    • 0