I have an iphone 11 running ios 15.4.1 When I send an email the jpg gets displayed but png's do not display. Here's the code that's suppose to display the the png's
<tr>
<td colspan="4" style="text-align: left;">
<a href="mailto:rxxxxx#gmail.com" onclick="parent.window.location.href='..\/..\/mail\/compose\/redirect;jsessionid=F74B8EA7BB5FBBBDA32D579B2DDCD692-n1.lxa10a?editorAction=NEW&to=rxxxxx#gmail.com';return false;" style="text-decoration: none;" target="_blank">
<img src="http://www.sailwxxx.com/skipper/public/img/email-32.png" style="width: 32.0px;height: 32.0px;border: 0;"></a></td>
<td colspan="4" style="text-align: center;"><h5> SwB link</h5></td>
<td colspan="4" style="text-align: right;"><a style="text-decoration: none;">
<img src="http://www.sailwbob.com/skipper/public/img/phone-32.png" style="width: 32.0px;height: 32.0px;border: 0;"></a></td>
</tr>
How do I get the png's to display on a iphone?
Related
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="text-align: center;font-size: 14px;height: 143px;width: 143px;" arcsize="50%" strokecolor="#fbe2a6" strokesize="4px" stroke="f" fillcolor="#f7c54d">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;">
<div class="yellow-circle">
<div class="number" style="color: #fff;font-weight: 700;font-size: 24px;line-height: 1;padding-bottom: 2px;">#1</div>
<div class="round-title" style="font-size: 11px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
<div class="round-title-small" style="color: #1f3b85;font-size: 11px;">2021 US News<br> World Report</div>
</div>
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="text-align: center;background: #f7c54d;font-size: 14px;height: 143px;padding: 0 6px 5px;border-radius: 50%;border: 4px solid #fbe2a6;">
<div class="yellow-circle">
<div class="number" style="color: #fff;font-weight: 700;font-size: 26px;line-height: 1;padding-bottom: 2px;">#1</div>
<div class="round-title" style="font-size: 13px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
<div class="round-title-small" style="color: #1f3b85;font-size: 13px;">2021 US News<br> World Report</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- <![endif]-->
design
now it is look like this
how to add stroke like in design
Instead of strokesize="4px" use strokeweight="4px".
However, you generally want to use points not pixels for Vomit Language (VML). 4px = 4 x 0.75 = 3pt. "Using points also ensures the border will resize properly in Outlook 120DPI." (https://github.com/hteumeuleu/email-bugs/issues/86)
Also, stroke="f" turns off the stroke (and it should be stroked with a d). So change to stroked="true". (HT: https://www.goodemailcode.com/email-enhancements/svg-to-vml, and includes further spec details)
All the questions I've read on stackoverflow have had the opposite problem, of a space being added unnecessarily.
In my case, I tried adding styles to the email template to space out the icons, but none seem to work. For example:
<a href="http://www.instagram.com/thing" title="thing">
<span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm">
<img src="instagram.png" HSPACE="50" VSPACE="50">
</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="center">
<tr>
<td width="280" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="275">
<tr>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/c7f897c9-5491-41c5-b73a-40d1e29f1185.png" width="32px" height="32px" alt="facebook" vspace="10" hspace="25"/>
</td>
<td width="20">
</td>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/9c7aac20-d385-4bde-a0cf-1ddb7d6f7060.png" width="32px" height="32px" alt="Twitter" vspace="10" hspace="25"/>
</td>
<td width="20">
</td>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/3b801696-a19c-4de3-adbe-c4cb9976d40b.png" width="32px" height="32px" alt="Instagram" vspace="10" hspace="25"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use nested tables and empty <td> with heights and/or widths. Tables are the best when it comes to HTML email.
I found the easiest way is to simply add a space PNG in between the icons.
This seems to work reliably in Outlook and Gmail.
<a href="http://www.instagram.com/thing" title="thing">
<span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm">
<img src="instagram.png" HSPACE="50" VSPACE="50">
</span>
</a>
<img src="space.png" HSPACE="50" VSPACE="50">
I created a html email, it's working correctly in Thunderbird and Gmail but not in Outlook.
I want to have side by side one image and on table.
I use display:inline in order to do that.
But Outlook show the image and below the table.
Here the code:
http://jsfiddle.net/675db7ca/1/
<br/>
<div style="display:inline !important"><a href="http://www.google.com/" style="text-decoration:none">
<img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></div><table cellspacing="0" style="table-layout: fixed; display:inline !important; max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
<tbody>
<tr>
<td width="200" border="0" style="vertical-align: bottom">
<span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
<br/>
<span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
</td>
<td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
<div id="lignerouge"></div>
</td>
<td width="150" rowspan="2" border="0">
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
<br/>
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
</td>
</tr>
</tbody>
</table>
<br/>
Thanks!
I can't really understand what it is that you are asking for help on.
I'm guessing you want the image next to the text, rather than above...
Put the image in a cell in that same table
<table cellspacing="0" style="max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
<tbody>
<tr>
<td><a href="http://www.google.com/" style="text-decoration:none">
<img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></td>
<td width="200" border="0" style="vertical-align: bottom">
<span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
<br/>
<span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
</td>
<td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
<div id="lignerouge"></div>
</td>
<td width="150" rowspan="2" border="0">
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
<br/>
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
</td>
</tr>
</tbody>
</table>
Best not to bother with divs in email if you don't know a lot about email client quirks.
Display:inline/block/etc won't work on elements like tables. Don't bother with things like that.
Unfortunately the program I use to send out email does not allow for #media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.
Here is the base of what I have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" style="width: 100%;"> --banner image here-- </td>
</tr>
</table>
<table align="left" width="320">
<tr>
<td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
</tr>
</table>
<table align="left" width="180">
<tr>
<td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
I'm creating an email template for a client. There are so many small bugs.
I can't get the side images to line up without having space between them and the tables width won't match up.
Check out the cross client previews here:
[removed]
and here is my code:
<table width="600" bgcolor="000000" style="padding-left: 14xpx;">
<tr>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 5px 0 0 0;margin-bottom: 0;">
<ul style="padding:0;">
<li style="list-style: none;">
<span><img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span><singleline /></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
</ul>
</td>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 10px 0 0 0; position: relative; left: -5px;">
<span>
<a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;">
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" /></a>
</span>
</td>
<td align="left">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
</table>
<table width="605" bgcolor="000000" style="margin-top: -20px;">
<tr>
<td align="left"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
</table>
<table width="606" bgcolor="000000" style="">
<tr>
<td align="left"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
There are so many problems in what you posted it's hard to tell exactly what it is you were trying to do.
The following is meant to be harsh:
First off, get everything laid out in the right spot before you start randomly adding negative positioning styles; there was no reason for that. Second, you might want to pick up a book on html and css before you take on another client. You have quite a bit to learn. Pay attention to text layout, image alignment and cell positioning.
The following gets rid of most of the garbage.
<table width="600" bgcolor="000000" style="padding-left: 14px;">
<tr>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;" /><br />
<img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/><br />
<img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/>
</td>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<span>
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" style="border:0px;" />
</span>
</td>
<td align="left" valign="top">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
99% of the time there are spaces between images, it is because people forget display:block; on the image tags. In this case though, you are floating your images, which is the rare case where display block is not needed. I wouldn't recommend this technique in html email however, unless there is a lot of spare room, as different clients have slightly different spacing between images.
Put each of your images in their own table cell, and it should fix the problems:
<td width="">
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
If you still have issues, repost your code and I'll take another look at that point.