I have been searching for a fix for this for days and have inserted many different CSS and HTML tags that aren't fixing my issue. I have four separate images in their own tables (as I read that Outlook puts in breaks where it's decided a page should end) but there is an enormous pixel break being inserted between my third and fourth image. Any tips at all are welcome. I removed some of the code for privacy but this is the general format I've used for each of the four images. Thanks!
<div>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" style="line-height: 1px; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc.jpg" border="0" height="1053" usemap="#Map" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
<table style="width: 600px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr style= "page-break-before: always">
<td align="center" valign="top" style="line-height: 1px; display: block; font-size: 0.0em;"><img alt="BlahBlahBlah" src="http://hosting-source.bm23.com/35156/public/abc2jpg" border="0" height="870" usemap="#Map2" width="600" style="color: white; font-size: 12px; display: block;" /></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
Related
I'm trying to make sure all the padding aligns as well as the text and logo aligning in this html.
The code I've used to make everything align is listed below.
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
<tbody>
<tr>
<td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
<div class="ee_editable" style="position: static;">
<div class="" style="padding-top: 10px;"><br></div>
<div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
<div> </div>
</td>
<td width="180">
<a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
<img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
</a>
</td>
</tr>
<tr>
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
</tr>
</tbody>
</table>
The above code is wrapped in a code like this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
Right now, the page displays as so:
But I need the white mini pic, text and logo to align with the rest of the page. Thanks for any input!
You need to span the td with the image across two columns, since the row above as two td's, if that makes sense.
So if you change
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
to
<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">
you should be good to go.
How can I center the all child tables in the middle of the main parent table? What's the best way the add this blue bar between each headline with 10px margin or padding on the side between headlines?
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
You can add a parent table around the smaller tables, give it a width and center it. You can give the table a width if you want (total of all child tables) width="285" in this case or go without the width, either works. Try the code below:
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
One thing i noticed after doing this is if you make the template responsive you dont have to worry about the menu as it will stack by itself.
Hope this is what you were looking for.
td {
border-right: 4px solid #007cb0;
}
td:last-child {
border: none;
}
<table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three<br />headline</td>
</tr>
</table>
For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for mailers.
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
<tr>
<td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
https://jsfiddle.net/xmbsemje/
td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do.
One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.
The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.
Please note: I didn't fix all of your code, just change a couple to get you started
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; background-color: blue;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
</table>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
last td width 550px so not effect your width 80%;
so you can add width on span tag
I am trying to create a single page, will be used as a newsletter, so my code is html/css inline.
http://jsfiddle.net/Chamberja/6t9r14ew/
I want to add a background image behind that entire table so the logo and the text will appear in the foreground.
I have tried adding
style="background-image: url("bg.jpg")"
and
style= "background: url(bg.jpg)"
So the final code looks like
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding:10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
I think I am doing the in-line wrong.
I hope this is what you looking for:
<table style="background: url(sportip.biz/alpha.jpg)" border="0" cellpadding="0" cellspacing="0" align="left" class="deviceWidth">
<tr>
<td style="padding: 10px 20px" class="center">
<img src="http://sportip.biz/nlsiplogo.jpg" alt="" border="0" />
</td>
</tr>
</table>
<!-- End Logo -->
<!-- Nav -->
<table style="position: absolute; margin-top: 0; margin-left: 0;" border="0" cellpadding="0" cellspacing="0" align="right" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #272727; font-weight: light; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: middle; padding:10px 20px; font-style:italic">
<b>Dear #name#,
Check out the latest releases of our magazines</b>
</td>
</tr>
</table>
Here's the fiddle.
jsfiddle.net/shanidkv/g0dd3vcm/1/
Find the updated JSfiddle code.
Note: Try to copy and past above url to browser facing some problem to attach link directly or on top of text
Many email clients do not support rendering a background image inside a table. See here for some examples of workarounds: http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth
I have been working on this html for a while trying to figure out why outlook 2010 is adding this 1px white line between images that are hyperlinked.
I am pretty sure I have tried all the tricks I have read about Html emails and outlook. Below is the code/styling I am using for just 2 tables. They have 1 single image in each. If I remove the hyperlink, there is no space in outlook 2010. If I leave the hyperlink I can't find a way to get rid of the space!
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="179" >
<img border="0" align="left" alt="Gold Rush" height="179" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" style="height: 179px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="25">
<img align="left" border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="height: 25px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
Any and all ideas are welcome please!
Just a question of order with attributes, it seems... Try like this, it's ok for me! ;)
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img style="display:block;" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" height="179" width="600" alt="Gold Rush" border="0" /></td>
</tr>
<tr>
<td><img border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="display:block;" width="600" /></td>
</tr>
</table>
try removing the width='600px' from the <td>, so that it would take the width of the img