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
Related
I have an animated .gif that is 1200px wide in total, but I'd like to scale it down to 600px wide for a clearer image in 120dpi. Below is the code that's in the message; it's displaying in the right width but the wrong height (as you can see there's no height defined, and it's not auto-scaling the way I'd like it to).
Outlook 2019 is the only email client in which it's displaying wrong. It looks fine in all other email clients. Also, the other images (.jpgs) in my message are displaying exactly the way I want them to, and they contain the same inline CSS.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0; text-align: center"><a href="https://www.lookoptic.com/collections/screen-products" target="_blank"> <img alt="FRAMES FOR THE FAMILY | Make protecting your eyes from harmful blue light a family choice. With matching frames for adults and kids, we keep it easy for the whole family to keep their eyes healthy even while spending more time in front of screens than ever." border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/HQd5zH/images/57fbdbba-e232-441f-abc2-098444d1525f.gif" width="600" style="display: block; border: 0px; outline: none;
width: 100%; height: auto; max-width: 600px;background: #fff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" /></a> </td>
</tr>
</tbody>
</table>
Any ideas? Thanks in advance.
Outlook will ignore the style sheet for your image. So you can use the height and width tags to direct the behavior of Outlook and allow modern email clients to operate the way they need.
If your animated image on Outlook is supposed to be 600px x 600px, do this:
<img src="#" width="600" height="600">
Then for the other clients, add in an inline style sheet (like you did in your example.
<img src="#" style="width: 100%; height: auto; max-width: 600px;" width="600" height="600">
This will work for any image format supported in Outlook.
Good luck.
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
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.
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.
I know this horse has just about been beat to death.. but I've got a Gmail table spacing issue that is just stumping me this morning.
<td valign="top">
<img src="###/enewsletter_layout_v3_18.jpg" alt="" />
<table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
<tr>
<td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
New Patient Special Offer <br/>
Save $$$
</td>
</tr>
<tr>
<td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
<h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
If you have read anything in this newsletter and have any questions or would like to
discuss further, please contact <br/>
The Centre at (555) 555-5555
</td>
</tr>
</table>
</td>
No matter what I do, the first image in the table there (layout_v3_18) always has spacing under it. About 2-3 pixels of white space in Gmail. Happens on a couple other images in the email, but the rest work fine. No matter how many times I compare the tables, it won't work.
Thoughts?
I've actually run into this problem a lot recently. The code we found that works best (read: looks consistent in the most mail clients) is the following:
<img src="###" style="display: block;" />
Just add the display: block to every image and it fixes the problem.
In answer to my own question (in case someone else has a similar issue), I finally found the issue (or a solution anyways).
I added a style="float: left" to the image itself, which magically fixed it.
Alternatively, using "display: block" tends to have a similar result if used on all images, but the float seems to clear the spacing specifically for GMail when it's working perfectly fine elsewhere.
Gmail can add white space around any table, including nested tables.
Although a bit of a hack adding the following as an inline style to the table removes the white space:
style="font-size:0.0em;" ...
Had the same issue, I added below line
style="line-height:1px;"
in the td tag above.
In my html template in filelist.
Using display:block on images reduced some space between image cells but didn't remove all gaps.
Adding the deprecated cellpadding/cellspacing attributes on the parent table (<table border="0" cellpadding="0" cellspacing="0">) those last gaps were gone too.
I had the same problem and did all the above style options but nothing worked. I made the table height shorter and it removed all the spacings.