I've got this responsive email template (that's just a portion of it, more on jsfiddle):
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://byensejendom.dk/conference/signup/559"
style="height:200px;v-text-anchor:middle;width:140px" stroke="f" fillcolor="#9B4242">
<w:anchorlock/>
<center style="color:#ffffff;font-size:16px;font-weight:bold">Tilmeld dig</center>
</v:roundrect>
<![endif]-->
http://jsfiddle.net/cC5tr/
Here are results from Litmus:
https://litmus.com/pub/74df5e9/screenshots
The section that SHOULD format the button right next to the image is enclosed with tags, however I can't get it right in 2007,2010 and 2013.
Thanks
The problem was that the two tables next to each other had both align="left" attribute. I changed the other table's attribute to align="right" and it started working
Related
The root problem is to display nice button compatible with MSO. As I used VML its working perfectly one pc, and not working an another. The point is environment of both PC is same
Win 10 - Microsoft Outlook ( 16005.13110.41006.0 )
The button source code is
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="line-height:28px; height:28px;width:135px; display: inline-block;" stroked="False" fillcolor="#468fb0">
<center style="color: #ffffff; font-size: 11px;">
CENTER
</center>
</v:rect>
<![endif]-->
At mine it looks nice
In other PC
So
Sizes are less in both dimensions
No text inside
Button is clickable
I tried different combination of VML/HTML tags, but it always the same - width&height ignored, and inner text is missing at all
If save emails as EML file and compare - its the same
Any suggestions what can be trigger this styling?
Other links and styles working properly btw.
Thanks
I noticed Campaign Monitor's 'bullet proof button' has this <w:anchorlock/> before the <center> which appears to function as an internal mechanism to stop anchors (links) from being modified. Maybe that's it?
I.e.
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://google.com" style="line-height:28px; height:28px;width:135px; display: inline-block;" stroked="False" fillcolor="#468fb0">
<w:anchorlock/>
<center style="color: #ffffff; font-size: 11px;">
CENTER
</center>
</v:rect>
<![endif]-->
Ok, it was a weird but
The problem was in pixels ( maybe screen resolution related? )
Every size with px was less. Solved with replace sizes to pt
I have a new challenge, which I haven't seen posted or answered here....
I have an image that needs to appear in the top-right corner of an email in Outlook, but that image is treated like a background image - the main content of the email is floated over it. The image file is NOT the width of the email. It's about 15% of the width of the email and perhaps 20% the height.
The email body must be 640px wide, height is variable. The image is 203px wide and 432px tall.
I'm using VML to display the background image in Outlook. The image is set to be the background image of a <td> tag, and that tag contains a number of additional tables that provide the email body (hence the variable height). The image should appear only once at the top right of the td.
Would coordorigin and coordposition be a valid approach to keep the image to a single location, or would it negatively impact the td containing the rest of the email body?
Any help would be appreciated.
Below is the bare minimum you need to achieve what you are asking for:
<!-- main containing table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<!-- main body table -->
<table class="w320" width="640" cellpadding="0" cellspacing="0" border="0" style="position:relative;">
<tr>
<td style="position:relative;>
<!--[if gte mso 9]-->
<v:image src="...yourimagehere.jpg" style="width:203px;height:432px;position:absolute;top:0;right:0;z-index:-1;" />
<![endif]-->
Your email here
Bear in mind that using a negative z-index on VML objects when using a background colour on the body of your email will result in the VML object displaying behind the bgcolor
VML allows a lot more styles than your typical HMTL rendered in the word processor, take full advantage where you can.
I can't actually remember if "right" works for position in Outlook. if not just use left:397px; instead.
Hope this helps
I have a header in my email with a logo on the right and some links on the left (all on one line). Works fine, but when viewed on a mobile device, the links on the left overflow to two lines.
I'd ideally like to have the mobile version display the logo on the top line and the links below it like the following:
DESKTOP:
Logo Link 1 Link 2 Link 3
MOBILE:
Logo
Link 1 Link 2 Link 3
How would I achieve this?
My code:
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="four sub-columns full-size">
<img class="left" style="float:left;width:180px !important;" src="#" width="180px">
</td>
<td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;">
Link1</span> <span style="color:black;font-weight:100">Link2</span> <span style="color:black;font-weight:100">Link3</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
I'm not really sure what certain classes do in your html as I'm used to working with Inky, the templating language of Foundation for Email 2 but the work-around should be sort of the same.
Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.
For example:
#media only screen and (max-width: 480px){
td .example-class { width: 100% !important };
}
Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.
Your links'll be pushed under your logo as its container is taking up the full width.
To display your logo in the center (if you are using Foundation for Email 2):
.float-center class on the <img> element
align="center" attribute on the <img> element
Wrap the <img> with <center> tags (needed for Outlook 2007, 2010, and 2011)
Or when using Inky: A center tag around your img would be enough to do the job.
Source for aligning an img: https://foundation.zurb.com/emails/docs/alignment.html
I am using Facebook Like Button on my page inside table cell
<table style="position:relative;">
<tr style="position:relative;">
<td>
<table cellpadding='0' style='border:solid 1px black;width:100%;'>
<tr align='left'>
<td align='left'>
<fb:like send="false" layout="standard" width="350"
style="height:22px;" show_faces="false"
action="like" colorscheme="light"
></fb:like>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">SOME TEXT</td>
</tr>
</table>
In IE 9 and Google Chrome it is appearing correctly inside the black border set to the table.
But in Safari it is appearing outside the td.
Why is this happening? I've tried to set Like Button style position to relative but same thing. Is there anything different in CSS for Safari?
This is because of other styling you have on page. You need to fix the styling that wasn't provided in your sample code.
Your code alone is working as expected in Safari (on Mac), so isolating the problem shouldn't be hard. See live example: before formatting, after formatting
I have a pixel border showing between table rows when doing email testing. iPhone and iPad only.
I have tried:
* {
margin:0;
padding:0;
}
I have also tried:
this makes the border blue instead of white but I want the border removed completely?
This apparently happens when you've applied background colors or images to individual table cells. I removed individual bgcolor and background-color references from the tables with mystery borders, and the problem went away!
Source: iPhone fail: The trouble with table borders and HTML email (Campaign Monitor)
Try adding this:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
This will stop users from zooming in. I found this works too:
<meta content='width=device-width; initial-scale=1.0;' name='viewport' />
But, it looks broken again when you zoom in. Initial load worked, so I was happy with the second option.
try adding:
border-collapse:collapse;
see what happens
It's an issue in iOS, for more info see: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email
Basically, it has to do with different background-colors for the table cells. To quote:
"To prevent these borders from appearing on the iPhone, you can try:
Removing background colors or images from individual table rows and cells, and/or;
Nesting the problematic table in a new table, featuring a background color that matches that of the inner table."
I "solve" this using box-shadow. I know it's not pretty but hey, we're talking about tables here :)
Simply put a box-shadow to any TD having the parent node color showing up on iPad. You can even do this only for the iPad inside an iPad specific media query.
border: 0;
should do it nice and easy
images? add style="display:block;" to images
While changing the background color of the containing table worked for most parts of my layout, for one section, that wasn't an option. There I used relative positioning and a left value of -1 (on the right cell). I was surprised to see positioning supported (at least in iOS 6.1). I suppose a negative margin would have worked too.
In my case I wanted a table that looked like overlapping boxes where the background box ended before the end of the row and the foreground box started indented from the start of the row. After reading every web site, Q/A, suggested here and trying every alternative what eventually worked was specifying a box-shadow, e.g.:
<table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td colspan="4" style="width: 90%; background-color: navy;">
<span style="color: #ffffff;">Background Box Line 1</span>
</td>
<td style="width: 10%;">
</td>
</tr>
<tr>
<td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">
<span style="color: #ffffff;">BG Box Line 2</span>
</td>
<td colspan="4" rowspan="2" style="background-color: red; width: 75%;">
Foreground Box Line 1<br>
Foreground Box Line 2
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
The line I had to get rid of was a thin horizontal gap line between the 2 "background" navy cells appearing on iPhones and the box-shadow: 0px -1px 0px navy; let me put a thin navy line above the bottom navy cell and so filled in what otherwise was that gap between the top and bottom navy cells.