Add CSS property to control space between rows of images

  • 1
  • Problem
  • Updated 4 years ago
  • Not a Problem
  • (Edited)
Using google chrome version 35.0.1916.153

Using New Template Builder tool to create a template to base future emails off of. 

Created table with a row of hard coded images for the header, so that they do not need to be edited or re-coded each email. 

Created a flex image using the code provided by the Template Builder Tool. Image is displaying with 3px or so of space between the row of hard coded images mentioned above. 

It's necessary for my email design that they are flush.
Photo of whitney

whitney

  • 8 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of whitney

whitney

  • 8 Posts
  • 0 Reply Likes
in the editor: 


in preview/in inbox:
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Can you send the email to marc.russell@raymondjames.com, thanks!
And paste your original code to Dpaste, etc.
Photo of whitney

whitney

  • 8 Posts
  • 0 Reply Likes
Hi Marc! Thanks for your reply, but I'm not familiar with Dpaste. Can you link me? 
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
www.dpaste.com

Set the syntax to HTML, and expiration to whatever you feel comfortable with.
Photo of Tyler Scott

Tyler Scott, Employee

  • 805 Posts
  • 39 Reply Likes
Hey there! I had one of my colleagues, who is more well versed in HTML, take a look as we're definitely not HTML experts here in support. Images that are inserted into the main flexible area in a template automatically have style="display:block;" and border="0" added to help keep them glued together, but it has to be manually called in within the HTML for hardcoded, editable image slots in a template.
Since it's an editable image tag and not a static image URL, we can't apply those properties directly within the image tag, so it's done through CSS. This particular template doesn't have any CSS included, but here's an example of how this can be accomplished. You could add the CSS property at the very top of your template HTML, above the open body tag currently there. You can name that property anything you would like, but here's an example you could add:

<style type="text/css">
.editable_image img {
display: block;
border: 0;
}
</style>

Then, you'll need to call that property in on any hardcoded but editable image within the template design. Here's an example of how you could call that in on that golfer guy image section (with the class name should match the name used in the above style section):

<td align="left" valign="top" height="349" width="600" class="editable_image">[% image name="image1" height="351" width="600" %][%/ image %]</td>

This is also occurring on the three smaller hardcoded but editable image slots lower down in the template, so you'll likely want to call that class in on each of those slots too.

Hopefully this helps, but please let me know if I can assist further.
(Edited)
Photo of whitney

whitney

  • 8 Posts
  • 0 Reply Likes
Awesome, thanks Tyler, that is doing the trick!