I have a roundrect on my code.
<v:roundrect
fillcolor="green"
style="top:1;left:1;width:50;height:50">
<w:anchorlock />
<v:textbox inset = "0,0,0,0">
<span> Test <span>
</v:textbox>
</v:roundrect>
This code works fine, but issue comes when I forward an email from outlook desktop client to outlook web. On forwarding email grey color border/shadow appears. And this happens only when I use light shade color like #FFF7E0, else everything works fine.
Don't know why is it happening?
Thanks in advance for your help
Related
Im having some difficulty. Im trying to have my email be responsive in outlook clients but its just not having it - It wants a set width in pixels but when I do this it looks rubbish in outlook mobile but most frustratingly it looks rubbish in GMAIL because the percentages have been removed.
Is there anyway to get around this? Specifically I want my image to be 100% width with a max width of 600px.
<tr container">
<td class="content">
<img width="100%"
src="imagelink" />
Generally what you want is the width attribute for Outlook, e.g. width="600", and the style attribute, which Outlook ignores, set to width:100%.
i.e. <img width="600" style="width:100%;max-width:600px" src="..." />
Not sure why your percentage is removed in Gmail - but perhaps because your stray quote mark here <tr container">. The other possibility (only guessing because you've only posted part of your code) is that you have not inlined the code. Some email clients do not respect embedded CSS, so you can't rely on it. You can use this tool to fix: https://inliner.cm/
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.
I'm creating a newsletter and I observed that in Yahoo mail a blue border is added to the images inside a link. I already checked other forums and you can solve this by applying any of these two options in the CSS inline:
border:none;
border:0;
This does work and you wont see the blue border on yahoo mail. The problem is that for my design I want to add a border-color to the image as link. So if I apply this solution for Yahoo mail I will have no border on the images.
Is there any way which I can solve this issue?
Here you have my code:
<tr>
<td width="260px">
<a href="#">
<img alt="" src="link-to-image/pic1.jpg" style="width:258px;border: rgba(235, 173, 21, 0.5) 1px solid;display:block;" />
</a>
</td>
</tr>
try border="1" border-color="#005288" in your image tag. Always use the 6-digit hex code also.
I have a signature that is used in outlook. The signature has an image at the bottom and a link that encompasses the image. On the computers you are able to click on the image and taken to the link while on the iPhone it asks you to save image, or copy or cancel. On occasion I have noticed it to work but have not been able to determine when it does link and when it asks to copy the image.
The code is the relevant code for the image/link
<table>
<tr>
<td>
<span style="font-size: 10pt; font-family: Calibri">
<br/>
<!-- begin ad tag -->
<a href="LINK" target="_blank">
<img src="IMAGE" border="0" alt="" /></a>
<!-- end ad tag -->
</span>
</td>
</tr>
</table>
Edit 1: Just testing some more, if I go into the web browser on the IPhone and then back into the mail and click the image it goes to the link without prompting to save the image.
Edit 2: Edit 1 works only on the iphone 4 version 5.1 (does not work on 4S have not tested others). Also works on ipad 3 version 5.1
Edit 3: Also does not work on 3g iphone either version 5.1
I am going to mark this up as an iphone issue and say jme1988 is correct unless someone comes up with something else.
Thank you for your help
You have to use the map tags to make it work.
Here's an example using a facebook picture linking to facebook using map:
<img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/FaceBook_128x128.png" alt="Facbook" usemap="#facebook" />
<map name="facebook">
<area shape="rect" coords="0,0,128,128" href="http://www.facebook.com" alt="Facebook" />
</map>
If you aren't familiar with this, try pasting the code in an .html document and check it out (should work). Typically you put the "mappings" just before </body> .
On the coords arguement, you should use x1,y1,x2,y2 plotting. What this means is that you want map a rectangular image from the top-left to the bottom-right of the size of the image. This appears to work on the 3G version.
I actually found a solution that works on iOS 6.1.2 as well as desktop Apple Mail (6.0):
Combine the above approaches:
<a href="http://foo">
<img src="http://bar" usemap="linkmap" alt="Click me" title="Click me"/>
<map name="linkmap">
<area shape="rect" coords="0,0,80,80" href="http://foo" alt="Click me" />
</map>
</a>
Try applying the following css to your image tag and make sure it's added as an inline style.
-webkit-touch-callout: none;
-webkit-user-select: none;
Sounds like an issue with the Iphone to me (wouldn't surprise me). The menu that pops up is likely because the Email client cannot launch the browser window when it has not already been started (hence why it works sometimes and doesn't others).
I'm not sure if my suggestion is the best practice, but the image map solution didn't work for me (iOS 6.1 on iPhone 4s).
Instead, I've just placed a transparent "a href" on top of my desired clickable image:
<a href="http://LINK" id="clickable" style="width:441px; height:244px; position:absolute; top:303px; left:46px; background-color:rgba(0,0,0,0); z-index:99">
Also, I had to leave the original "a href" around the image itself also, because the transparent link did not work on Outlook on PC.
Hope this helps.
Make sure you're linking to the image instead of using an attachment. See Why anchors tag containing an image don't work in Iphone's mail app?.
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