i have a problem with 2 divs that have to show right next to each other with space between them. It has to be responsive ofc and the max-width can only be 600px while the min-width has to be 280px.
It actually works as intended when i open the html in the browser, but when i send it as a mail, the two divs are right next to each other, with the space being above the second div instead of between them. Also they are fixated to the left for some reason.
How it looks in the browser (and how it should look):
How it looks after being sent per mail:
So i dont really know why it doesnt work as intended..
Also sorry for all that code, but if you test it in a browser u can see, that it works perfectly fine , which it doesnt when used as a mail template..
<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
<div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
</div>
</div>
</div>
As #N. Ivanov said :
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.
So for those of you who must use tables in your HTML emails
, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.
Table Math, Meet Box-Model Math
So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:
<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">
<tr height="100%">
<td width="100" border="1px" height="100%"></td>
<td width="300" border="1px" height="100%"></td>
</tr>
</table>
Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:
But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:
However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table widthis removed, the code looks like this:
<table cellspacing="0" height="450" cellpadding="10" border="1">
<tr>
<td width="80" height="100%" border="1"></td>
<td width="280" height="100%" border="1"></td>
</tr>
</table>
And, as intended, the resulting widths are correct for both the table and the columns:
But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.
**
Nested Tables
**
If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:
Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But only when they are nested, as the parent table behaves appropriately.
Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
Even without any borders there are variances in width by 2–4 pixels for a nested table with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this).
source->
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the <table> tag rather than divs. Further you should only use inline CSS and not use any classes for example bootstrap ones. Hope this helps!
Related
I made a HTML email layout using table, the design is working fine in my machine but when I put the code to test in putsmail the footer moves to the left when I view the mail in the dekstop.
It should come like this:
Its coming like this:
My HTML code:
<!--Footer-->
<table class="footer">
<tr>
<td style="padding: 50px;background-color: #f7f7f7">
<table width="100%">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</table>
</td>
</tr>
</table>
My CSS code:
.footer{
align-content: center;
width: max-content;
position: relative;
}
Thank You in advance
It’s safer to use inline CSS for email templates, I also don’t think any email clients supports the align-content property or even max-content on width. Maybe try it like this:
<table width="100%">
<tr width="100%">
<td style="padding: 50px;background-color:#f7f7f7">
<div style="margin-left:auto;margin-right:auto;">
<p style="text-align: center; font-size: 12px; line-height: 1.5;">
Having Trouble with something?
<br>
Reach out to us support#vantagecircle.com
</p>
<img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
</div>
</td>
</tr>
</table>
Note that I'm using width inline there, and added a div in the inner td to align to the center.
Change the width: max-content; to width: 100%; and it should work.
You can read more about how "max-content" works here
Use width: 100% for the table.
Creating an email signature.
Currently it looks as expected in a browser.
However when I copy this in to an email client as a signature the right hand column "#float-me-right" wont float right. Could someone please advise the best practice to keep this fixed along the right hand side of the table.
kindest regards
<table class="footer-table" border="0" cellpadding="0" style="max-width: 1900px; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-size: 15px">
<tbody>
<tr>
<td class="col">
<img width="280" border="0" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/team-chris-500x400-1.gif" alt="Hello">
<p style="margin:0"><a name="_MailAutoSig"><strong style="font-size: 21px;font-weight: 100;line-height:28px; color: #728bfc; margin-left: 12px;">Name</strong></a></p>
<p style="margin: 0; font-size: 15px; line-height: 24px; font-weight: 100; margin-left: 12px;">Job Title</p>
<p style="font-size: 13px; line-height: 18px; margin-left: 12px; margin-bottom: 0;">07123456789
<br><span style="color: #000 !important;">test#test.com</span></p>
</td>
<td id="float-me-right" class="col" style="text-align: right;">
<table class="inner-table" style="width: 320px; text-align: right; margin-top: 131px; text-align: left; display: inline-block;">
<tbody>
<!-- top row right -->
<tr>
<td>
</td>
<td>
<span><img border="0" style="padding-top: 0px; padding-bottom: 10px; display:inline-block; width:120px;" src="http://stevenmacdonald.co.uk/wp-content/uploads/2020/02/Screenshot-2020-02-18-at-16.57.16.png" alt="Hello"></span>
</td>
</tr>
<!-- bottom row right -->
<tr>
<td>
<p style="font-size: 13px; line-height: 18px; margin: 0;">Address Top Line<br> addresss line one<br> addresss line two<br> addresss line three<br>
</td>
<td>
<span style="display: inline-block; font-size: 13px; line-height: 18px; padding-top: 18px;">0151 012 0192<br>
info#mywebsite.co.uk<br>
mywebsite.co.uk</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/stevenmacdonald180/5L8myxnv/9/
Instead of using float:right try using table property align="right". That will make your table align right. Check the codepen link.
Email Signature
Since you're using tables, it's better to use table properties as first priority instead of CSS.
Try using the align="right" in the table element which you want to align right.
align="right"
Do let me know if this works.
I need to convert this layout or look that is made with a table in html to Divs, I believe. The table's structure is two columns with an image on one side and text associated with the image on the other. When squeezed small enough (like on a mobile device) I need the columns to go from two to stacked or one column. I don't know whether I need to use breakpoints and never have... or if there's any other better responsive solution to replicate the structure I have included below. This needs to be made in the Wordpress Divi theme's text editor.
Right now I am trying to make this work using Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) within this codepen. I have no idea if materialize will even work within wordpress...
Codepen
https://codepen.io/robmatthews/pen/qebwor
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
To change to a non-table layout you just need to structure your divs like a table. I have applied classes that make that clear.
The div with .my-wrapper is taking the place of the table itself. The div(s) with .my-row are serving as the table rows, and the ones with .my-cell are the columns/cells of the "table".
Using flexbox we get a flexible layout that can be controlled very easily and allow you to change the layout where you want. Simply by applying:
display: flex;
...to a div, it becomes a flex container and the immediate child elements (the divs with .my-cell in this case) become flex items. I put several comments in the code below to point out what each line is doing. There are borders added just to make the layout clearer. Run the snippet and view in full page mode so you can adjust the width of your screen and see the responsive change.
Repeat the row layout to build out the rest of the table.
A great resource for more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
More info on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
* {
box-sizing: border-box;
}
.my-wrapper {
max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
margin: 0 auto; /* centers the container on the page */
border: 1px solid blue;
}
.my-row {
display: flex; /* direction row by default, the cells will be side by side to start */
}
.my-cell {
width: 50%;
padding: 20px;
display: flex; /* yep, the cells can get flexbox layout too */
flex-direction: column; /* each cell will have its content laid out vertically */
align-items: center; /* centers content horizontally */
justify-content: center; /* centers content vertically */
border: 1px solid red;
}
.my-cell img {
max-width: 100%; /* make the images responsive too */
height: auto;
}
#media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
.my-row {
flex-direction: column; /* force the layout to stack the cells vertically */
}
.my-cell {
width: 100%; /* cells should be full width at this point */
}
}
<div class="my-wrapper">
<div class="my-row">
<div class="my-cell">
<img src="https://picsum.photos/200/300" />
</div>
<div class="my-cell">
<h2>Some title text</h2>
<p>Some paragraph text...</p>
<ul>
<li>whatever</li>
<li>you</li>
<li>want</li>
</ul>
</div>
</div>
</div>
Rob,
Adding a class to your table tag (class=responsive_table for this example) and writing a media query will stack the columns one below the other.
#media screen and (max-width: 400px) {
table.responsive_table {
display: block;
}
table.responsive_table td {
width: 100%;
display: block;
}
}
<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
<tbody>
<tr>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
<h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
<div class="col"></div>
</td>
<td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
<div class="col">
<div class="col">Easily input new clients and team rosters.</div>
<div class="col"></div>
</div>
</td>
</tr>
<tr>
<td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
<td style="width: 373px;">
<h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
</td>
</tr>
<tr>
<td style="width: 373px;">
<h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
<h2 style="text-align: center;">More Features</h2>
</td>
<td style="width: 426px;">
<div>
<div class="row">
<div class="col">
<p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
</p>
<ul class="ul1">
<li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
<li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
<li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
<li class="li2"><span class="s3">Share data and progression with your club</span></li>
</ul>
</div>
</div>
</div>
<div id="lipsum"></div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p style="text-align: center;">
You may change the breakpoint in media query where it says max-width
I'm creating a responsive email... and tested it out on mail chimp and it was fine all throughout. but when tested on exact target (the email client needed to send out this email)
the image I need to center near bottom of email... WILL not center. see code:
<div class="layout one-col fixed-width" style=
"Margin: 0 auto;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style=
"border-collapse: collapse;display: table;width: 100%;background-color: #f8f6f6;"
margin-left:="" emb-background-style="">
<!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" emb-background-style><td style="width: 600px" class="w560"><![endif]-->
<div class="column" style=
"text-align: center; position: absolute !important; color: #8e8e8e;font-size: 14px;line-height: 21px;font-family: Cabin,Avenir,sans-serif;max-width: 600px;min-width: 320px; width: 320px;width: calc(28000% -167400px);">
<div style=
"Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;font-size: 12px;font-style: normal;font-weight: normal;"
align="center">
<a href="url"
target="_blank"></a>
<center>
<img style=
"Margin-top: 10px; Margin-left: 20px;Margin-right: 20px;Margin-bottom: 15px;border: 0;display: block; text-align: center; position: absolute !important;height: auto;width: 100%;max-width: 257px;"
alt="Partnerships" src="image7_1112017.png" />
</center>
</div>
</div><!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</body>
Everything else seems to be fine... but this is the only image that needs to be centered. fyi i got got the template from campaign monitor and modified accordingly. image was not centered in template.
Setting the width of a block-level element will stop it from filling the width of its container. Taking advantage of this you can set the margin to automatically split the remaining space evenly on the left and right side.
<div style="width: 200px; margin: auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
Here we set the image container width to 200px and the image to 100% so it will scale to the width given. So even if an image is 500px wide, it will be centered and scaled down to 200px because that is the defined size of the container. If you know the width of your image, assign that to the container then setting the image element width becomes unnecessary.
EDIT
You may want to consider reformatting the body of your html. You will want to remove display:table; from the container with the layout__inner class.
<body>
<div class="layout one-col fixed-width" style="max-width: 600px;min-width: 320px;">
<div class="layout__inner" style="background-color: #f8f6f6;">
<!-- Content Body -->
<div style="margin-bottom:15px;">
Here is some example content. This is where you want your main content to be.
</div>
<!-- /Content Body -->
<div style="width:200px;margin:auto;">
<img alt="Partnerships" src="image7_1112017.png" style="width: 100%;" />
</div>
</div>
</div>
</body>
Here is a working example: JSFiddle
All you need is a one column one row table (maybe). You have a lot of divs in your code, way too many. And also a lot of CSS that won't work in an email. Keep the CSS simple, use tables to center things. Use a lot of nested tables rather than one table with many rows and columns. Try this in your DIV. It may work, but you may have to rework the rest of your code too.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img
alt="Partnerships" src="image7_1112017.png" style="margin-top: 10px; margin-left: 20px;margin-right: 20px;margin-bottom: 15px;border: 0;" /></td>
</tr>
</tbody>
</table>
What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>