When coding emails, i seem to be getting broken templates in the Outlook web app preview pane, however when i double click the email (email opens in new window) it renders fine.
The text within td's have alot of spacing between lines, images aren't vertical-aligning correctly amongst other issues.
Does anyone know what causes this and how it can be fixed? I did read on-line that the preview pane wraps the email in its own and adds its own styling which affects the layout?
There are a few issues it could be, but I'd start with putting this in your style tag:
#outlook a {padding:0;}
Also, are you using tables? Make sure your <td>'s at least 19px high.
For images, make sure you have display:block; and the padding and margin zero'd out.
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
Beyond that, post some example code as it is hard to figure out the exact cause of each issue without seeing it.
Related
how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?
Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.
If this ^ isn't an option, your limitations are based on what email clients you need to support.
I am using Campaign Monitor CSS as a reference.
Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520)">
</div>
Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).
Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520);
background-position: 50%;>
</div>
Now you've got an image positioned (centered), at your desired size. on an element.
Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.
Of course, you lose Yahoo, in addition to Outlook and Gmail.
HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.
With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.
The following is supported by most mail clients other than Outlook and Outlook.com
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>
Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.
Even an embedded image has very little support. Send a base64 image in HTML email
The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.
I want to style a contact email, but I have a few problems:
I sent a test-mail to my gmx mail and it removed the style="background: url('...') center center no-repeat; position: relative;". In the received code I only see style="position: relative;"
Like the first problem, but with "background-size: cover;" and "width: calc(50% - 3px);"
My <style> - tag got commented and looks like this:
Commenting CSS like that does not prevent it working - it just ensures the browser does not treat it as HTML.
gmail strips all classes and ids from HTML, so nothing you put in your style sheet based on those will work anyway. You can style standard elements though, and inline styles still work.
Outlook doesn't support background images at all, so you should probably give up on this path.
I'm designing email template. Between some texts I need to put break lines. So far so good on most clients except outlook.com(on browser). It wraps my <br> inside a <p> which has big margin by default.
I have tried to use <br>, <td> with space, <td> with <span> and space inside and <td> with <p> with margin:0 and space inside. Each time i got my html wrapped in a <p>.
Why it wraps my html in <p> ??
I've never found the .ExternalClass hacks to be of any use. Outlook.com is very iffy in general about line-height and <p> tags as a whole, so I've found the best thing to do is remove all <p> tags from my emails just and put all text sections inside a <font> tag inside the <td>.
I ran a quick litmus test and wasn't able to reproduce your results, with either <br> or <br/> however you could just nest a table inside a <td>, don't define heights, and use multiple rows in that table to simulate breaks. I've found that it doesn't mess with my usual line-height rhythm.
Outlook has trouble rendering html emails correctly.
There is a little hack that might help you:
<style type="text/css">
.ExternalClass p (Or whatever, you can target pretty much anything here)
{line-height: 50%; margin:0;}
</style>
This will talk to outlook's native stylesheets and adjust those, since outlook applies the .ExternalClass class to your email.
Here is some important information on the subject: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
Many will say that all styling in html-emails has to be inline. This is true to an extent because some clients will strip the head and body tags from your email. But for those that don't, like outlook, it is a valuable space for work arounds.
Hope this helps.
The reason Outlook wraps everything in <p> tags is because it uses the MS Word engine to render html instead of a browser based renderer.
The p tags are unavoidable and the suggestions above are good ways to 'zero out' the unwanted margins. Outlook doesn't strip <style> tags, however some MS Exchange servers do (for security I assume), so if you are finding your style tags ignored in Outlook, try sending to a different domain email address (particularly a non corporate one) and you should find it will work as expected.
I also suggest never using <p> tags in email and using double <br> tags between paragraphs and <br> or <br> for top and bottom 'padding' within table cells.
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here