its my first time working with html & and css and i’m trying to create an html email template and got to a problem with outlook. For some reason my white rectangle is not being positiond at the bottom of the email, and i have a small margin on both left and right sides as you can see in the image below.
On Gmail i got it the way i need it as it sets in the bottom of the email body with small gaps between the icons, as you can see in the picture below:
After a bit digging, i saw that outlook doesnt render all properties such as position, opacity and margin. would apperciate help on figuring that out.
*Note – the double curly brackets are used here because I send this email through a Python code.
here my full code currently:
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">
<style>
@media only screen and (max-width: 600px) {{
.wrapper {{
width: 100% !important;
}}
.container {{
width: 100% !important;
}}
.white-box-table {{
width: 100% !important;
}}
.white-box {{
width: 100% !important;
text-align: justify !important;
}}
p.title {{
font-size: 20px !important;
}}
p.text {{
font-size: 16px !important;
}}
p.end-date {{
font-size: 16px !important;
}}
.logo {{
display: none !important;
width: 50% !important;
margin-bottom: 20px !important;
visibility: hidden !important;
}}
.logo-mobile-only {{
display: block !important;
width: 50% !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
visibility: visible !important;
}}
}}
@media only screen and (min-width: 769px) {{
.logo {{
display: block !important;
visibility: visible !important;
margin-bottom: 10px !important;
}}
.logo-mobile-only {{
display: none !important;
visibility: hidden !important;
}}
}}
</style>
<!--[if mso]>
<style>
.wrapper {{
width: 100% !important;
}}
.container {{
width: 100% !important;
background-image: url('https://firebasestorage.googleapis.com/v0/b/tara-project-377516.appspot.com/o/Light%20Green%20BG.jpg?alt=media&token=283adde2-043d-4aab-9cb7-bc0987cc8b04') !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}}
.white-box {{
position: relative;
margin-top: 30px;
margin-bottom: 50px;
opacity: 80%;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
z-index: 0;
}}
.hero {{
width: 100% !important;
position: fixed;
bottom: 0;
}}
p.title {{
font-size: 20px !important;
}}
p.text {{
font-size: 16px !important;
}}
p.end-date {{
font-size: 16px !important;
}}
.logo {{
display: block !important;
width: 50 !important;
overflow: visible !important;
}}
.logo-mobile-only {{
display: none !important;
width: 50% !important;
overflow: hidden !important;
margin-top: 0 !important;
}}
@media only screen and (max-width: 600px) {{
.logo {{
display: none !important;
width: 50% !important;
margin-bottom: 20px !important;
visibility: hidden !important;
}}
.logo-mobile-only {{
display: block !important;
width: 50% !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
visibility: visible !important;
}}
}}
</style>
<![endif]-->
</style>
<!--[if mso]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
<v:fill type="tile" size="100%,100%" src="cid:bg"/>
</v:background>
<![endif]-->
<![endif]-->
</head>
<body style="font-family: Heebo, Gisha, sans-serif; margin: 0; padding: 0;" width="100%">
<table class="container" width="100%" cellpadding="0" cellspacing="0" border="1" style="margin: 0; padding: 0; background-image: url('https://firebasestorage.googleapis.com/v0/b/tara-project-377516.appspot.com/o/Light%20Green%20BG.jpg?alt=media&token=283adde2-043d-4aab-9cb7-bc0987cc8b04'); background-size: cover; background-position: center; text-align: justify;">
<tr>
<td>
<table class="content" cellpadding="0" cellspacing="0" border="0" style="width: 100%; margin-left: auto; margin-right: auto; padding: 20px; box-sizing: border-box; text-align: center; position: relative;">
<tr>
<td>
<div>
<img class="logo" src="cid:logo" alt="logo" style="display: block; visibility:visible !important; margin: 0 auto; z-index: 1; width: 20% !important; margin-top:-25px;" width="25%">
<table class="white-box-table" cellpadding="0" cellspacing="0" border="0" width="50%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0 auto !important;">
<tr>
<td style="position: relative; margin-top: 30px; margin-bottom:50px; opacity: 80%; left: 50%; transform: translateX(-50%); background-color: white; padding: 0px; border-radius: 20px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); z-index: 0;">
<![if !mso]>
<div class="white-box">
<![endif]>
<![if !mso]>
<img class="logo-mobile-only" src="cid:logo" alt="mobile-logo-only" style="display: block; margin: 0 auto; z-index: 1; margin-top:-25px;" width="20%">
<![endif]>
<p class="title" style="margin-top: 0px; margin-bottom: 0px; line-height: 24px; text-align: center; direction: rtl; font-family: Heebo, Gisha, sans-serif; font-size: 44px; font-weight: bold; color: #87be3e; line-height: 1.5;">{d['title']}</p>
<p class="text" style="padding-bottom: 5px; margin-left:20px; margin-right:20px; line-height: 24px; text-align: justify; direction: rtl; font-family: Heebo, Gisha, sans-serif; font-size: 24px; color: #2F2F2F; text-align: justify; align-content: center; line-height: 1.5;">{d['text_editor']}<br>לפרטים נוספים לחצו <a href="{d['link']}" style="padding-top: 5px; transition: background-color 0.3s ease; text-decoration: underline; border: none; color: #87be3e; font-weight: bold; display: inline-block; text-align: center;">כאן</a>.
<p class="end-date" style="padding-bottom: 5px; margin: 10; line-height: 24px; direction: rtl; font-family: Heebo, Gisha, sans-serif; font-size: 24px; font-weight: bold; margin-top: -10px; display: block; text-align: center; color: #2F2F2F; line-height: 1.5;">{date_info}</p>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="direction: rtl; background-color: white; font-size: 20px; opacity: 70%; width: 100%; text-align: center;" width="100%">
<div class="hero" style="text-align: center; display: inline-block !important; line-height: 50px;">
<p style="font-size: 16px; font-family: Heebo, Gisha,sans-serif; font-weight: bold; line-height: 1.5; margin-top: 0px; margin-bottom: 0px; text-align: center; color: #2F2F2F;">מוזמנות ומוזמנים לעקוב אחרינו!</p>
<div class="social-icons" style="text-align: center; margin-top: -8px;">
<a href="https://www.linkedin.com/company/tara-strategic-consulting/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:linkedin_icon" alt="linkedin_icon"></a>
<!--[if mso]> <![endif]-->
<a href="https://www.facebook.com/TaraConsulting/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:facebook_icon" alt="facebook_icon"></a>
<!--[if mso]> <![endif]-->
<a href="https://tara-il.com/" class="social-icon" style="display: inline-block; padding: 10px 20px; font-size: 30px; color: white; text-decoration: none; transition: color 0.3s ease-in-out;" padding="10px 20px"><img src="cid:website_icon" alt="website_path"></a>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
2
Answers
I don’t know if you already tried but margin works, when capitalized in outlook, so you should try using Margin: 0; and not margin: 0; For positioning you can check out this link: https://www.goodemailcode.com/email-enhancements/faux-absolute-position.html.
I hope it helps.
Outlook Windows (desktop) uses the Word rendering engine, so doesn’t conform to the same web standards as other email clients.
Outlook doesn’t recognise block-level styles such as padding and margin on inline elements such as the
<a>. So to get a space around each<a>you would need to wrap each icon in a td like so:<td style="padding:10px">...</td>. Alternatively, you can make the space by using spaces and non-breaking spaces (multiple spaces are treated like just one space):&nsbp; &nsbp; &nsbp; &nsbp;For positioning, you can’t use something like a sticky bottom position. You have to just have the content on a new table row after the other content.
For opacity, you may need to accept that only some email clients can do this: https://www.caniemail.com/features/css-opacity/. Treat it like a progressive enhancement and don’t worry that some people in Outlook can’t see that feature.
For spacing, don’t use negative margin or padding. Use padding on
<td>, or margin on the<p>. (Padding on a p is not supported in Outlook.)As I like to say when dealing with Outlook: Look out! See the support levels here: https://www.caniemail.com/clients/outlook/#windows
Outlook is very print-oriented so you need to have an outer table that sets a width e.g.
<table width="600"...>. You’ll want to make that mso only.Fix your !mso conditional code, the syntax is not right.
Outlook wants most things to be inline, rather than in CSS (as should be the case normally), and doesn’t accept media queries. VML should normally be wrapped around some element, not as a style.
Please look up known solutions to these things online, there are lots of examples.