I'm struggling with the html in this email (for a booking management tool called [https://www.checkfront.com/][1]).
This code works fine sent from gmail to gmail, Office to gmail, pagebuilder to gmail, etc. When sent from Checkfront's HTML editor as a booking notification to gmail, my "justify-content" styling is stripped away.
<tr id="5imagesSection" class="ordenTable" style="display: flex; justify-content: center !important;">
<td id="smileyImage1"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle1300.png" height="100" width="100" alt="My Marbella Weekender" data-image="dhvrprieupdm"></td>
<td id="smileyImage2" style="margin-top:10%;"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle2300.png" height="100" width="100" alt="My Marbella Weekender" data-image="un1eob2gwjf1"></td>
<td id="smileyImage3" style="margin-top:20%"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle3300.png" height="100" width="100" alt="My Marbella Weekender" data-image="veaowxr4ebv6"></td>
<td id="smileyImage4" style="margin-top:10%;"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle4300.png" height="100" width="100" alt="My Marbella Weekender" data-image="oxyhrbhzvjhi"></td>
<td id="smileyImage5"><img src="https://mymarbellaweekender.com/wp-content/uploads/2022/03/Circle5300.png" height="100" width="100" alt="My Marbella Weekender" data-image="uy3cf06q540k"></td></tr>
Image of HTML not being justified to center and justify-content:center being 'removed'
Here is the code for the whole email:
https://codepen.io/Grabgooglesgoogles/pen/OJOGjYz
I would love feedback in case there is an aspect of the code which doesn't follow best practices and in case these other clients are all making allowances for my lack of knowledge 😊
Can I provide more information? Let me know!
Jack
Edit: I've also now tried changing the table row and table data to divs, but this hasn't helped either.
You need to force each <td> to width: 20%, otherwise it is only as wide as its contents.
have you tried with margin: auto in your tr container?
Related
I have created a header for our companies email templates, luckily I was able to find a basic template on the web and tweak it to our requirements.
I am a real beginner when it comes to HTML so I am sure there are many errors in it too.
I need to figure out how to reduce the blue banner to 42px in height but everything I try ruins it. I have also been told that my 600 wide option is very old school and it should be 1200. I have tried to change this too, but then it loses all of the other formatting and looks terrible.
Its supposed to be responsive, if anyone could make any edit suggestions I would be very grateful.
header.txt
header.html
try changing the padding in the td containing the logo/image. To decrease the height of the blue banner, decrease the padiing at top and bottom of the above mentioned table data.
This helps you but another way is to decrease the logos height.
From looking at the codes, there is no specific "height" that is being assigned to the table containers that you can change to specify to 42px. The most that you can do is to remove the "top" and "bottom" padding from the containers inside to make the header's height smaller.
Here's a sample code with the changes. If you notice, I changed the top and bottom padding to 0px. For the second td, I left 5px for the top padding to add some spaces between the logos and the top edge of the screen. If you want to edit the width, I change the width to 800px but you also need to adjust the widths of the 2 containers inside the table. For example, I changed them from 270px to 370px each.
Lastly, I agree that this "template" that you found seems very complex and it would be better to learn a little bit of basic html and css and what you're trying to do is simple and can be done with much simpler codes. Good luck!
<center>
<table cellspacing="0" cellpadding="0" width="800" class="w320">
<tr>
<td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;">
<a href="https://www.hayley-group.co.uk/" style="text-decoration:none;">
<img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/>
</a>
</td>
<td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px">
<table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right">
<tr>
<td align="right">
<a href="https://www.facebook.com/HayleyGroup/">
<img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://twitter.com/HayleyGroup">
<img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/>
</a>
</td>
<td align="right" style="padding-left:5px">
<a href="https://www.linkedin.com/company/hayley-group">
<img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
Trying to code for Outlook and I want to cry. I have no idea how to test or figure out where it's going wrong. But it looks awful in Outlook and fine everywhere else. I've already spent 5 hours trying to re-work it with some success, but none of the padding or spacing is maintained in the logo header area or the right sidebar.
Any help would be BEYOND appreciated: http://cdpn.io/GAzqh
Thank you, thank you, thank you
Looks like outlook html rendering is powered by Microsoft Word http://www.howto-outlook.com/faq/wordhtml.htm. There are some tips in the link that talk about how to work around the issues.
You need to set the widths on your cells. Outlook doesn't know how wide to make them.
Your header code should look something like this. I simplified it a bit for you:
<table border="0" cellpadding="0" cellpadding="0" width="100%">
<tr>
<td width="40%" align="center" valign="top" style="padding-top: 10px; padding-bottom: 10px; padding-left: 25px">
<img align="left" alt="MD Logistics" border="0" width="167" src="http://www.mdlogistics.com/emailassets/logo.png" title="MD Logistics"/>
</td>
<td width="60%" align="right" valign="center" style="padding-top: 10px; padding-bottom: 10px; padding-right:25px;">
<img src="http://www.mdlogistics.com/emailassets/linkedin.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/facebook.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/youtube.jpg"/>
<img src="http://www.mdlogistics.com/emailassets/twitter.jpg" />
</td>
</tr>
</table>
Because you have ample space for the social icons, I just put them inline. You could keep them in cells though, but it was more code to do it that way.
I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.
<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td width="225" bgcolor="#e1822d" valign="top" align="left">
<div style="padding:12px 20px 0px 20px;">
<div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
<singleline label="Title">Tenerife</singleline>
</div>
<div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
<multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
</div>
</div>
</td>
<td width="425" valign="top" align="left">
<img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
</td>
</tr>
</tbody>
</table>
And in every other mail client it outputs like this:
But in Gmail and Gmail only it outputs with an additional size in the orange column:
I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.
Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?
Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.
For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.
Each mail client has different HTML rendering technique.
I can not really find out the difference from both the images. I see both images are identical.
From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.
I am not a html programmer but I have to fix an urgent problem. Since this is a private project, I can't post the code here. But here is the obfuscated page source (Note: a href tag is created by Spring Security tag)
<td width="359">
<table style="margin-left:auto; margin-right:8px">
<tbody><tr>
<td>
<img src="/img/Login.gif" alt="Login" height="18" border="0" width="120">
<br>
<br>
<img src="/img/newAct.gif" alt="new account" height="18" border="0" width="120">
</td>
</tr>
</tbody></table>
</td>
Above html code creates a 1 pixel shadow right under the second image. Please see attached picture and red arrow pointing to 1 pixel line.
Thank you for your help in advance!
<img src="..." style="margin-top:0px;">
I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. I have put vspace="10" on the image tag to put 10px margin on the top and bottom of the image to have a space between the image and text below it. However, in Outlook the vspace is not being picked up and the text appears directly under the image with no space between.
Does anyone know how to get this to work? I tried to put a margin-bottom of 10px on the image, but again this did not work.
It might be easier to use a nested table and define the height of the row to be 10px. What you are contending with in Outlook 2007+ is Word HTML rendering which handles CSS in it's own special way.
With HTML Email there is a lot of nuances between the different browsers. One thing i have learnt from creating emails is that it needs to be extremely simple. Both margin & padding are not supported by Outlook (due to it using the word rendering engine).
The solution
Replace the image and the space with a table containing 2 spacer gifs and the image in the centre. For example (you need to use absolute paths to your images):
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="YOUR IMAGE" width="" height="" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
</table>