Racking my brain regarding gaps in html email in dark mode. Specifically when three images are sitting next to each other in a table.
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="230" align="right"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="230" height="355" border="0" /></td>
<td width="189"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="189" height="355" border="0" /></td>
<td width="231" align="left"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="231" height="355" border="0" /></td>
</tr>
</tbody>
</table>
Renders a gap on the right hand column
When you force the scale down to 640px, scaling all images proportionately, it removes the gap. Any idea why this would be?
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr style="background-color:#FFFFFF">
<td width="226" align="right" bgcolor="#FFFFFF"><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_02?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="226" height="355" border="0" /></td>
<td width="186" bgcolor="#FFFFFF" ><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_03?scl=1" alt="Overland" style="display: block !important; padding: 0 !important; margin: 0 !important;" width="186" height="355" border="0" /></td>
<td width="228" align="left" bgcolor="#FFFFFF" ><img src="https://s7d5.scene7.com/is/image/overlandsheepskin/ThanksgivingSale11-20-20_04?scl=1" alt="Overland"style="display: block !important; padding: 0 !important; margin: 0 !important;" width="228" height="355" border="0" /></td>
</tr>
</tbody>
</table>
This has nothing to do with dark mode but it is a long lasting rounding bug in WebKit (Safari’s rendering engine used throught all of iOS) and Blink (Chrome’s rendering engine also used in Android). You should be able to reproduce this on desktop by zooming in or out of your email in either Chrome or Safari. Dark Mode makes this more visible because you get a dark line instead of a white one.
As for why it happens with your table at 650px but not 640px, let's do a bit of maths. Based on your screenshot, your screen size is 1080px wide. Minus the 48px gutter on each side imposed by your email client, that makes a viewport of 984px for your email. At 640px, your email only needs to be scaled up by 1.5375 times. At 650px, your email needs to be scaled up 1.513846153846154… times, which isn't a round count and will inevitably create white lines.
The solution isn't to change your email's width, though, as this problem will inevitably rise at other screen sizes. My advice would be to make sure to use relative units (like %), and code your layout so that all your columns are the same widths. (So for a three columns layout, each "cell" would be 33.333333%).
Related
There appears to be a white line above the image in Gmail app on IOS in dark mode.
I've tried many solutions regarding this but could not remove the white line/space.
img[class="visual"] {
width: 100% !important;
height: auto !important;
text-align: center;
margin: 0 auto;
}
<tr>
<td bgcolor="transparent" valign="middle">
<table cellpadding="0" cellspacing="0" border="0" class="content" align="center" width="640">
<tr>
<td bgcolor="transparent" align="center" valign="top" style="width: 640px;">
<img src="https://via.placeholder.com/150.jpg" width="640" height="250" style="display: block; border: none; max-height: 250px;" border="0" alt="Banner" class="visual" />
</td>
</tr>
</table>
</td>
</tr>
I'm having an issue aligning text and an image link next to each other in a table row. The image keeps drifting up and down. I've tried various align middle and display block styles with no luck. I am limited to only having CSS inline and trying to display properly across different devices and desktop email clients. The posted code is a nested table that I can not get the elements to align with each other. Viewing the code in the browser, for the most part, displays correctly. But once the code is in Outlook and other programs the image drifts within the row.
image example
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11">
</td>
</table>
This is very simple and when tested with Litmus it has consistent results across all email clients. I set the font size, line-height and image size to 13px. Since they were all equal, it made it easier to align. I didn't put an align on the table because it should default to middle-align. On the image I placed vertical-align: -2px; Outlook has buggy support when it comes to using values like middle, but not with number values. in the style sheet and added display: inline-block;. I placed everything in one <td>.
With Gmail, Apple, IOS, Android and other email clients, everything remains consistent. With Outlook, it shifts about a pixel.
I also added text-decoration: none; to the hrefs to clean up the look a bit.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
555-555-5555 |
stackoverflow.com |
<img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13">
</td>
</tr>
</table>
Good luck.
I would use valign="bottom" for all tds, and in addition add some padding-bottom to the img tag to correct the slight vertical offset between text and image (actually only 1px in this particular example):
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
555-555-5555 |
</td>
<td height="100%" align="left" valign="bottom">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</table>
writing html for email is like a trip back to the 90ies!
if you wrap all your <td> inside a tabelrow <tr> and set it's valign to bottom,
just run the code snippet:
<table cellspacing="0" cellpadding="0">
<tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</tr>
</table>
I am trying to scale a table cell that has a background image for an email I'm developing. However, I'm having trouble making the height dynamic on the mobile version.
The table cell:
Has no content over the background image
Stacks on mobile
Needs to show the image in a 1:1 ratio, with none of the image cut off at the top or the sides
Is full width on mobile
Fiddle
The fiddle will make the issue clear when you resize your browser window - The cell stacks fine and the width is fine, it's the height that's the problem. The height of the cell is too low, cutting off some of the image.
I need the height to firstly be exactly 385px x 256px on desktop (the exact size of the image), then 100% width on mobile, while also having a full image height on mobile.
There are reasons behind this approach which are not worth boring you with here.
The code:
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<table width="215" height="256" border="0" cellspacing="0" cellpadding="0" style="float:left;" align="left" class="100p" bgcolor="#eeeeee">
<tr>
<td width="215" style="float:left;" align="left" class="displayproperlyplease 100nopad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
<tr>
<td align="center">
TEXT
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<table width="385" border="0" cellspacing="0" cellpadding="0" class="100p" style="float:left;display:inline" align="right">
<tr>
<td width="20" ></td>
<td background="http://msgfocus.com/files/amf_to_infinity/workspace_83/2-years.jpg" style="background-position:left; background-size:cover; float:left;" bgcolor="#0c0807" width="385" class="100nopad" valign="right" align="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="256">
<tr>
<td align="center">
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
CSS
#media (max-width:630px) {
*[class="100p"] {width:100% !important; height:auto !important; text-align:center !important;}
*[class="100pad"] {width:95% !important;}
*[class="100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
*[class="displayproperlyplease 100nopad"] {width:100% !important; padding-right: 0 !important; padding-left: 0 !important; float: none !important; text-align: center;}
table[class="wrapper"] {width: 100%;}
table[class="wrapper"] .fl {width: 100% !important;float: left;height: auto;}
}
How can I make the background image on mobile be 100% width, but have the height increase/reduce to ensure none of the image is cut off?
I'm making an email HTML document for my company
Everything is fine other than a set of images that are meant to appear.
On Office they appear just fine but on Gmail the are hidden and when i look at the HTML in inspector i see that the style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 300px 32px;" has been added to the image.
Does anybody know why this is and how i can stop it.
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
<tr>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border: 1px solid #45b75c;">
<tr style="border: 1px solid #45b75c">
<td align="center" width="155" height="155" style="background-color: #f3f1f1;">
<img src="https://www.soccerhubb.com/assets/img/emails/world-cup/advert1.png" width="115" height="115" alt="Advertise to your target audience" line-height="" style="display: block;"/>
</td>
<td align="center">
<p style="text-align: center; font-size: 24px; color: #45b75c;">
Advertise to your target audience<br />
with intelligent analytics
</p>
</td>
</tr>
</table>
</td>
</tr>
<table>
Use style tag and apply style with display:block !important
In css !important keyword use for overwrite all style
Never mind i found out the issue.
As my image was called "advert1" spam filters caught it and assumed other content in the same table was also spam
note to self: don't use "advert" in alt tags or image names
I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this -
My code is available here - HTML version.
I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?
Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.
Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So
<td width="150" style="line-height: 83px;">
<img src="" height="83px">
</td>
You are running into issues because you are going about the whole layout wrong. You shouldn't need to break your watch image up into multiple pieces, and definitely shouldn't have an image containing the letters 'DS' from the title in the center.
Because you have a complex layout, it is better to use colspans and nested tables - it is a cleaner technique than cutting images into little pieces. Images that are cut horizontally will always cause issues - if not in the initial send, Outlook will force gaps in there if it was forwarded anyway. If you must cut an image, try to do it vertically as it will remain perfectly intact in all clients.
It is also good practice to have all CTA's (calls to action) and important copy/text in html, not images, as most clients block images by default. It is also considered spammy to have an email that has a bad ratio of images to text.
Give this a try:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="400" style="padding:30px;">
Fall in love with...
</td>
<td valign="top" width="50"> <!-- It is easier to split an image vertically -->
<img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
Luxury Watch Brands <!-- Titles like this should always be in text not images -->
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" colspan="3" width="250">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
<img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
Shop Luxury Watches > <!-- Call to actions are better in text not images -->
</td>
</tr>
</table>
</td>
</tr>
</table>
the best output for an emailer can be done by slicing image vertically,(not horizontally) and arrange it in multiple nested in single row . It will work flawlessly in all clients