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.
Related
I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}
This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.
This is how I am displaying the image.
<td class="img-container">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td
<td class="img-container" style="width: 100%; height: 380px;">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
I'm creating an email signature template for our team. The email signature has a profile image of a team member above a table row with a dark background; however, Gmail is creating a space between bottom of the image and the section underneath. I've tried virtually everything that I could find on stackoverflow, email monks, etc.
The table's cellspacing, cellpadding, and border have been set to 0. display:block hasn't worked, setting the font-size to less than 2px hasn't either.
Any help would be appreciated.
<tr>
<td width="202" rowspan="3" valign="bottom" style="vertical-align: bottom;">
<div valign="bottom">
<img
src="IMAGEURL.png"
align="absbottom"
width="202"
height="242"
border="0"
style="display: block; line-height: 0px; font-size: 0px; border: 0px; padding: 0px; vertical-align: bottom !important;"
/>
</div>
</td>
</tr>
Can't replicate unfortunately but what happens when you remove the div?
There really isn't any need for the div in there to be honest, you may as well remove it anyway and the align="bottom" should only be set on the table cell as the image will inherit that property by default.
To be honest, it would be good if you could post your entire code you're using as it'll give us context of what you're working with. Even if it's with placeholder content like you already have done with the image path.
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 have a MailChimp template I am working on for a client. In Gmail only, I get some images that are much larger than the stated dimensions in the template. In this example, the image is shown in Gmail at 600px x 120px but the <td> is:
<td cellpadding="0" cellspacing="0" style="border-collapse:collapse;vertical-align:top" height="4px" width="600px">
<img src="http://www.marketingscience.co/boa/hero-header.png" style="display:block;border:0;min-height:4px;width:600px;background-color:#696969;color:white;font-size:18px;line-height:100%;outline:none;text-decoration:none">
</td>
Any suggestions would be greatly appreciated.
Try setting image dimesions in plain html, like this:
<img src="image.png" width="100px" height="300px" />
Also, you have no height set in 'style' attribute, so adding it may solve the issue
Add a style element in your email template and set some default styles for all images in your email, like this:
<style>
img {
display:block;
height:auto;
line-height:100%;
}
</style>
MailChimp will add these styles inline to every <img> element before it sends the email.
Then, when possible, add the height and width attributes to each image as Alex Ponomarev suggested.
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.