No my code doesn't split columns into rows. I keep the structure of hybrid is but since outlook doesn't read div's the same way as tables, i use tables to do the alignments. my method of coding is a mixture of 'C' and 'D' from the chart.
Challenge accepted!
Conditional statement in the head using CSS. As i said above the body doesn't have conditional statement, so if you use only tables and use classs in the body you can control quite a lot of tables using css in the header. including alignment and all.
Let me know if the above didnt make sense, you can ask me more here
Cheers
Hi Valerie Gifford,
I found this code sometime ago, maybe it will come in handy. The CTA isnt rounded on all but it make the whole area of the button clickable.
<style type="text/css">
.btn a {
border: 2px solid #556270;
border-radius: 4px;
color: #556270;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in;
}
* [lang=x-btn] a {
border: 2px solid #556270;
border-radius: 4px;
color: #556270;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in;
}
.btn a:hover,
* [lang=x-btn] a:hover {
border-color: #3f4953 !important;
color: #3f4953 !important;
} </style>
<div class="btn" lang="x-btn">
<a href="#" style="color:#556270;text-decoration:none;border-width:2px;border-style:solid;border-color:#556270;border-radius:4px;display:inline-block;font-family:sans-serif;font-size:14px;font-weight:bold;line-height:20px;padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;text-align:center;transition:all 0.2s ease-in;"> Click here or else </a></div>
Cheers
Hi AJ LaPorte,
Outlook doesnt read the style tag when it comes to width an height of an image. Since your image is 600px width and the table has 20px padding on each side, the table increases in size to 640px. Basically outlook will force the image to be its original size and then adding padding.
Best idea to get a consistent result will be to use an image that is 560px so it fits into the TD properly.
Cheers
You beat me to it! I would have had said the same thing, we had done a full image background for one of our campaigns a few months back, it got annoying since the client started changing the copy alot..
Hi Mischa,
I tried Josh's code and it works fine in gmai.
This is all you need for gmail:
<a href="tel:8005555555" style="color:#999999;font-family:Tahoma;text-decoration:none;"><span class="#999999">800-555-5555</span></a>and yes, that is class="#999999" in the span. Let me know if that works.
Please post the code for that specific section and maybe we can help.
Cheers
Hi,
I had a play around with @Stig Morten Myre's code. I found it wasnt rendering in Gmail the way it should have.
<style type="text/css">
.btn a {
border: 2px solid #556270;
border-radius: 4px;
color: #556270;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in;
}
* [lang=x-btn] a {
border: 2px solid #556270;
border-radius: 4px;
color: #556270;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 20px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: all 0.2s ease-in;
}
.btn a:hover,
* [lang=x-btn] a:hover {
border-color: #3f4953 !important;
color: #3f4953 !important;
}
</style>
<div class="btn" lang="x-btn">
<a href="#">
Click here or else
</a>
</div>
After running it thru inliner it worked like a charm. Just separated the '.btn a' into a seperate class with lang=x.
Litmus tested but cant see it working on Outlook 365
Cheers
What i do for my emails are i place a <a href="tel:8002346000" style="text-decoration:none;color:#000001;">800-234-6000</a>.
Since gmail doesnt like #000000, setting the color to #000001 still gives the links a black color.
The above allows me to show the number as part of the surrounding text and if a user with a smart phone taps on the number they get the option to make a call.