inline style attributes randomly showing up

I am trying to add some edge to the main images in my template. So I created some CSS to do it but after I update the current template and view the preview the template changes the code to add in styling that I don't understand how to override. my code for the big images that need frames looks like:

<div class="img-wrap">
<div class="img-box">
<img class="inline" src="<$imagesrc link='false'$>" width="340"  alt="Wormy Dog Merch"><div class="img-left"></div><div class="img-right"></div><div class="img-top"></div><div class="img-bottom"></div><div class="img-topleft"></div><div class="img-topright"></div><div class="img-bottomleft"></div><div class="img-bottomright"></div>
</div>
</div>

But the view source of the template preview looks like:

<div class="img-wrap" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:relative;overflow:hidden;" > 
<div class="img-box" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:relative;float:left;overflow:hidden;" > 
<img class="inline" src="/images/image-fill.gif" width="340"  alt="Wormy Dog Merch" style="border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;border-top-width:1px;border-top-style:solid;border-top-color:#000000;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#000000;margin-top:4px;margin-bottom:14px;margin-right:10px;margin-left:25px;padding-top:2px;padding-bottom:2px;padding-right:0;padding-left:0px;" > 
<div class="img-left" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;left:0;top:0;width:20px;height:100%;background-color:transparent;background-image:url(http://i2.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/edge-left.gif);background-repeat:repeat-y;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-right" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;right:0;top:0;width:20px;height:100%;background-color:transparent;background-image:url(http://i3.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/edge-right.gif);background-repeat:repeat-y;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-top" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;left:0;top:0;height:20px;width:100%;background-color:transparent;background-image:url(http://i4.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/edge-top.gif);background-repeat:repeat-x;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-bottom" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;left:0;bottom:0;height:20px;width:100%;background-color:transparent;background-image:url(http://i5.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/edge-bottom.gif);background-repeat:repeat-x;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-topleft" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;top:0;left:0;height:20px;width:20px;background-color:transparent;background-image:url(http://i6.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/corner-topleft.gif);background-repeat:no-repeat;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-topright" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;top:0;right:0;height:20px;width:20px;background-color:transparent;background-image:url(http://i7.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/corner-topright.gif);background-repeat:no-repeat;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-bottomleft" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;bottom:0;left:0;height:20px;width:20px;background-color:transparent;background-image:url(http://i8.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/corner-bottomleft.gif);background-repeat:no-repeat;background-position:top left;background-attachment:scroll;" ></div> 
<div class="img-bottomright" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-width:0;outline-color:0;font-size:100%;vertical-align:baseline;position:absolute;bottom:0;right:0;height:20px;width:20px;background-color:transparent;background-image:url(http://i9.createsend.com/ti/r/D4/EB1/6C0/032420/images/edgeimgs/corner-bottomright.gif);background-repeat:no-repeat;background-position:top left;background-attachment:scroll;" ></div> 
</div> 
</div>

I am doing most of the styles I added as a internal Style Sheet and the template was already referencing an external style sheet but there are a quite a few styles here that I am certain are not coming from my code. I am pretty new at email designing. I am mostly familiar with HTML for browsers. I realize that because it is a template that it is going to change my code but alot of this is stripping out the styling I was needing for positioning etc. Is there a way to override some of this stuff?

Thanks,
Aaron

Blake, 6 years ago

Hi Aaron,

Campaign Monitor actually automatically moves your style sheets inline when you import a template, so that is why you are seeing all of these styles for each element.

If you could post links to your HTML and CSS files we could take a look for you and see why the styles controlling your positioning don't seem to be working when you import the campaign. If you don't want to post them publicly you can just send them via e-mail to support@campaignmonitor.com and we'll take a look for you.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098