Treating javascript like an image?

[centinel3 +]

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>

[Lhotch +]

oops, I misunderstood question.

Do you have a link to the pages so we can see whats going on?

[centinel3 +]

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

[centinel3 +]

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

[Eric Barnes]

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

I see banners:
Furniture - Electronics
Automotive - Clothes

[centinel3 +]

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

[Eric Barnes]

Try this:

style.css (line 275)

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

[centinel3 +]

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

[Lhotch +]

Margins and padding is handled differently by different browsers. It sure would be nice if they would all actual adhere to standards wouldnt it?

[centinel3 +]

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

chris