Treating javascript like an image?

I am running into an issue with javascript.

I replaced 4 static images with javascript banner code and wrapped each one in a <div> tag for hover/styling. These 4 spots are located in the body section and in order for these spots to line up exactly like the static images I had to tweak the style #content. Now, while the main body page looks the same as before (with banner script rather than static images), when you navigate to other pages the body is aligned left and smushed over.

I understand the logic since I modified the #content to float left, so my question is, is there a way to treat this openx javascript as a static image, or give each javascript code specific styles so that it will align properly?

The script I'm using below aligns the 4 javascript spots correctly, but throws all other body elements to the left:

/* Content
* Main content area
*/
#content{
float: left;
text-align: left;
margin:0px;
padding:0px 0px 0px 10px;

}

#content th a:link, #content th a:visited {
color: #333333;
text-decoration: none;
}
#content th a:hover {
color: #333333;
text-decoration: underline;
}

.indexcontent {
line-height: 1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#newlistings {
margin: 30px 0px 0px 0px;
}

.contentpic {
width: 325px;
height: 150px;
float: left;
border: 1px solid #CCCCCC;
margin: 0px 15px 20px 10px;
}

.contentpic:hover {
border: 1px solid #68B8DF;
}
------------------------------------------------------------

Here is the home.tpl page:

{$pPageContent}
<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=2");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=3");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=5");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>


<div class="contentpic">
{literal}
<script type='text/javascript'><!--//<![CDATA[
var m3_u = (location.protocol=='https:'?'https://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php':'http://www.closeoutfloorsamples.com/openx/www/delivery/ajs.php');
var m3_r = Math.floor(Math.random()*99999999999);
if (!document.MAX_used) document.MAX_used = ',';
document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
document.write ("?zoneid=4");
document.write ('&cb=' + m3_r);
if (document.MAX_used != ',') document.write ("&exclude=" + document.MAX_used);
document.write (document.charset ? '&charset='+document.charset : (document.characterSet ? '&charset='+document.characterSet : ''));
document.write ("&loc=" + escape(window.location));
if (document.referrer) document.write ("&referer=" + escape(document.referrer));
if (document.context) document.write ("&context=" + escape(document.context));
if (document.mmm_fo) document.write ("&mmm_fo=1");
document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript></noscript>
{/literal}
</div>

<div id="newlistings">
<h2>{$smarty.const.LANG_FEATURED_LISTINGS}</h2>
<hr />
{feature_listings_horizontal number=8 cols=4 table_attr='width="100%" cellpadding="3" cellspacing="3"' td_attr='style="border-top: 0px dashed #CCCCCC; background: transparent; text-align:center; "'}</div>

Here's the link to the test page I have been working with.

http://closeoutfloorsamples.com/index.php?template=TEST

I did find that if I put a space (  on the very top of the page (following {$pPageContent}) That the script banner spots lined up where they should, though when I checked in firefox, the issue still remained.

Thanks for looking at the code. I have been working on this alteration for a couple of days now.

chris

Any help...

If there is anyone out there who knows how to fix this issue I'm having with javascript it would be much appreciated. I'm not sure why these 4 java banners are dropping down and would like to fix this because the only way I came up with fixing this was to float the body left, which in turn now makes all of the body float left, which isn't exactly aesthetically pleasing to the eye.

chris

Unless I am missing something it looks fine to me. Using Firefox on a Mac.

I see banners:
Furniture - Electronics
Automotive - Clothes

If you click the test link a couple of posts ago you will see what I'm talking about. The top of the top two images aren't lined up with the top of the menu. They drop down 20+ pixels.

chris

Try this:

style.css (line 275)

Code:

#content {
margin:1px;
padding:1px;
}

Ahhhhhhhh!!!!!!!!

Why the heck does that work!!!!

Sort of.

I mean I'm not going to start splitting apples here, but come on. I'm 2px off from being dead even (which I'm fine with). What I want to know is why doesn't it line up automatically to the upper left? This is the stuff that makes my eyeballs hairy! HAHHAAAA! Thank you Eric for the code. If you know why, fill me in on this mystery. If not, I'm letting this sleeping dog lie.

Thanks again,
Chris

Oh yes it would

You're telling me. Can we put it to a vote?

chris

You know I had no idea why that worked. However to figure it out I opened the page with Firefox and the firebug extension. Next did a inspect element and found the highest div which was the content because the td was aligned correctly. Finally right from firebug I started altering the margin and padding until it finally worked.

So there you go. Who knows!