I have created a email signature (HTML template). That works perfectly fine on outlook web, Gmail and other clients but fails on Microsoft Outlook (Mail) App. I am using the following code:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 16px !important; letter-spacing: 0px; color: #3e3e3e; margin-left: 0px;">Charlotte McMahon</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: 12px !important; letter-spacing: 0px; text-transform: uppercase; color: #3e3e3e; line-height: 20px; margin-left: 0px;">
Head of Block Management
</span>
<br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" alt="Hawk Block Management" style="width: 150px; margin: 10px 0 20px 0;"><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>DD:</strong>
020 8016 1178
</span><br/>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin: 0px 10px 0 0;">
<strong>T:</strong>
020 8016 4122
</span>
<br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>E:</strong>
cmcmahon#hawkbm.com
</span><br>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 20px; margin-left: 0px;">
<strong>W:</strong>
<a title="Hawk Block Management" href="https://hawkbm.com" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">hawkblockmanagement.com</a></span><br>
<div style="padding: 10px 0 0 0;"></div>
<span style="font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 10px !important; letter-spacing: 1px; color: #3e3e3e !important; text-transform: uppercase; line-height: 15px;;">
<a title="Map" href="https://goo.gl/maps/mtfqGUtziZD2" style="color: #3e3e3e !important; text-decoration:none !important; text-decoration:none;" target="_blank">Kirkdale House, Kirkdale Road,
Leytonstone, London E11 1HP</a></span><br>
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/block2.jpg" alt="Hawk Block Management" style="width: 150px; margin: 20px 0 0 0;">
The expected result and result on Outlook, Gmail is
But the result on Outlook App is
Is there any solution to make design consistent on Outlook Mail App too?
Outlook tends to ignore inline style image sizes. Add width="150" which will correct Outlook growing. Outlook will ignore margins placed on the image. Add a padding to the table cell instead.
<img src="https://hawkblockmanagement.com/wp-content/uploads/2019/03/Hawk-Logo.png" width="150" alt="Hawk Block Management" style="width: 150px; height: auto;">
Outlook doesn't support Montserrat. It doesn't work with webfonts, so it's using Arial as it's fallback. This is risky because it might default to Times New Roman, making everything serif.
Good luck.
Related
im trying to make an outlook signature with html.
I dont know how can i do a signature email with 3 rows
what i want
what i get
There is my code:
<section id="2" style="float: left; position:relative; margin-left: 230px; width: 250px;">
<div id="user" style="margin-top: 10px;">
<h1 style="margin: 0px 0px 5px 0px !important; font-size: 20px; color: #414042; font-weight:bolder; font-family: Arial, Helvetica, sans-serif;">Adriano Medeiros</h1>
<h2 style="margin: 5px 0px 0px 0px !important;font-size: 16px; color: #414042; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">MARKETING DIRECTOR</h2>
<h3 style="margin: 10px 0px 0px 0px !important; font-size: 14px; color: #414042; font-family: Arial, Helvetica, sans-serif; font-weight: normal;">Dpt. Marketing e Comunicação</h3>
</div>
<div id="email" style="margin-top: 10px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAUCAYAAAB1aeb6AAAACXBIWXMAABYlAAAWJQFJUiTwAAABiUlEQVRIieWVvXXCMBSFP3HoYYQ0qgMThEwQGtWYDcwGMAFkAkyLCjwC2cBpUUM2MBO8FJJPHBMn5rfJLe139Pndd5+sRARnVQRE3Ec5EGkjuRIRAJxVCTC6MfgDGGojGYDarUmAWBvJgwPLG4HfgUHgDIGHFr7brbOqq40kwDNwuDJ4VQJHwAbotsLLR2DvrOppI1tggLfoGpppI1EAJ5ScbZWKOngHipn08FZdorE2MnVWdZ1VKZVMtSrFHWDjrIq0kRzvwOoM6AHoayOJs6oLbIGXalEVXmjprEq0kVwbiYDXE8BFsDJnVQ/Y48d6pDo4wMhZlYYgxsC4AfitBI7wHXfqin+Dg7eqvAl96jdhpY0UiY7xwaoFN4HD903I8DmoBnESxlNcVvMG59JuUsTXJsQhRAMgDu8ybSQNwUqBp4ZnonZrpGlx0EQbWZQfhGAl1ASrRrOmnZc1D50XH9ADpvwx3590Dhx8EI/29lQ1CdzN9L/hl/48zlXWxl8aC+DhjuCFNpJ+Agxhobt2v5EjAAAAAElFTkSuQmCC" alt="email" style="width: 20px; position: absolute; margin-top: 15px;">
<p style="margin-top:15px; float: left; margin-left: 40px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">Adriano.medeiros#homa.pt</p>
</div>
</section>
<section id="3" style="float: left; width: 273px; ">
<div class="line" style=" margin-top:10px;border-left:2px solid #D9AB28; height: 130px;position: absolute;"></div>
<div class="contacts" style="margin-left: 30px;">
<div class="telefone">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAACXBIWXMAABYlAAAWJQFJUiTwAAABU0lEQVRIibXVwVECMRTG8X8Y79CBcMgZrUBL4JKzawd04NoBVuByNRfogBLgai5rB1LB80AW1zWQ4MbvxMyb2d+Q916iRIT/zlXzw1lVAHNgCuy0kZtcyKAFvHoAYOqsKnMh6v2NBghloo3UfZEBsDhTr/oCDTI8U79zVs1zILHMciC7vh9JQc71BDL0RYkIzqoauA7Ub7WRbV+k6Unv5kYRbWQFrAP1jbOq9+a3p6sA9p36MAd0RLSRT8Lj2hv6sSfayAZ4zA39WkZtpAKWOSF16j1xVlXAQ6C0B+7bo+2sGgNjoA5dqCeRVMhZNQK2fO/ZM7DwPY4jCdCMw40x7dQ+gML3OI5EoFhegDIJ8VAJPP0BWqdc9QBoIyWH8e4ubCx1MuKhCrjnsudhm3xc3SQe31IbKS76J+3445sQXtwjAInTFYtfxhmHoxwBK23k+Bh+AZQCix9ZmcqxAAAAAElFTkSuQmCC" alt="phone number"style="float:left; margin-right:20px; width: 20px;">
<h2 style="padding-top: 7px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">960000000000 | Ext. 22044</h2>
</div>
<div class="smartphone number">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAjCAYAAAB7NEEmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAA90lEQVRIie2WPW7DMAxGHw2PGXKDyEA8NzdpFs9tTlZ3jZbmBj2Cu0ZDfYM2J2CHUqmHAjEkLwLCRZTE70H/oqgqS1u1OLEoaB2d4MUBLoM1tp2OAKKqBC/PwEsGMNqh7bSX8xEHfFrjCRgSYDvg0fym5m/Kp7bTfeoQg5c3A7vpRqWMcGpXfTlHqizo1vxdJivqtxWwsso6Exr1q7LWtBxovF7vmayoH8qa/h16h8I+eEl6qUx3/TTrSd8DMAQvYwLXAZv/oFjHhkybu6YfQGPlYtDe8qR+TrCcj6yBrxmxr8DTjLimajv9Bg7A5UbwLeCF3wRt/AFdyDg/DvcalwAAAABJRU5ErkJggg==" alt="smartphone number" style="float:left; margin-right: 20px; margin-top: 5px; width: 20px;">
<h2 style="padding-top:15px; font-size: 14px; font-family: Arial, Helvetica, sans-serif;color: #414042; font-weight: bold;">2222222222</h2>
</div>
Outlook uses Word for rendering message bodies. In Word, two HTML elements that support a subset of the cascading style sheets properties are called out: DIV and P. Read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Note, Outlook for desktop doesn't support base64 images. You'd need to attach an image and then use the cid: attribute to refer to the attached image.
I'm having trouble displaying a white horizontal line in a div with a black background next to a heading.
This is what I've tried:
<div style="background-color: black">
<div style="border-bottom: 2px #ededed solid; overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Can anyone help?
Please increase the height in second div tag as I believe 17px is too low
One approach would be to use a combination of a pseudo-element and grid. This avoids the need for unnecessary extra markup, and will adapt to any width.
body {
background: black;
}
h1 {
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;
}
h1:after {
content: "";
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;
}
<h1>Willkommen</h1>
If you have to use inline styles, you'll need to add an additional element like a span to take the place of the pseudo-element, like this:
body {
background: black;
}
<div style="
color: white;
font-size: 2rem;
font-family: sans-serif;
text-transform: uppercase;
display: grid;
grid-template: auto / auto 1fr;
grid-gap: 1em;
align-items: center;">
Willkommen
<span style="
display: block;
background: #ededed;
height: 1px;
margin-top: 0.25em;">
</span>
</div>
you can use text-decoration and text-decoration-color CSS properties for the same.
<div style="background-color: black; padding: 15px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<strong><span style="text-decoration: overline;text-decoration-color: #ededed ;color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
another option you can use is <hr/> HTML tag
<div style="background-color: black; padding: 10px 10px 25px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0;">
<hr/>
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen</span></strong>
</div>
</div>
Update as per image-
You can use Sean's answer
another trick you can try with the below style
.line {
white-space: pre;
text-decoration: line-through;
}
<div style="background-color: black; padding: 50px 10px">
<div style="overflow: visible; height: 17px; margin: 5px 0 10px 0">
<strong><span style="color: white; padding: 0px 5px; font-size: 2rem; font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif">Willkommen
<span class="line"> </span>
</span></strong>
</div>
</div>
See below:
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
So the above, is a standard paragraph tag but with the extra text (which seems like some sort of variable);
The code is from a random markup file I came across, I am curius to see what it represents.
&bull gives you to use a bullet mark and the {|FeatureFour|} is the content inside the <p> tag, so {|FeatureFour|} is just a paragraph content
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• Hello world!</p>
. You can change these content in the text editor.
I am getting a gap at the end/beginning of just 2 cells in my email and I can't for the life of me figure out why.
The cell-padding is set to 0
cell-spacing = 0
Here's what I have:
<style type="text/css">
h1,h2,h3,h4,h5,h6,h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;}
h1 {
font-size: 20px;
color: #B99350;
line-height: 1;
font-size: 25px;
padding-top: 10px;
font-align: center;
font-weight: normal;
text-align: center;
}
h3{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #B99350;
font-size: 24px;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 10px;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: capitalize;
}
h4{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #b99350;
font-size: 22px;
padding-right: 10px;
padding-left: 15px;
font-style: normal;
text-align: left;
font-weight: normal;
}
h5{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: normal;
color: #FAFAFA;
font-size: 14px;
padding-top: 3px;
color: #FCFCFC;
}
h6{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-left: 15px;
color: #FFFFFF;
}
h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;
}
h8 {
padding-left: 15px;}
h9 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;}
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 10px;
color: #FFFFFF;
line-height: 20px;
}
li {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
color: #FFFFFF;
line-height: 1em;
padding-top: 10px;
}
body {
background-color: #FCFCFC;
}
.blue {
color: #B99350;
}
</style>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" valign="center" ;
>
<tbody>
<tr>
<td colspan="2" bgcolor="#201545" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<h7>• AA rated State Government of South Australia occupies 76% of the NLA</h7>
<br>
<h7>• $13 million* spent in refurbishments between 2008 and 2016</h7>
<br>
<h7>• 5.3 year WALE and 97% occupancy</h7>
<br>
<h7>• Located in the core of Adelaide’s CBD</h7>
<br>
<h7>• Surplus land area with development potential</h7>
<br>
<h7>• Fully leased net income of $9.3 million*</h7>
<br>
<h7>• Net lettable area of 19,855sqm*</h7>
<br>
<h7>• 4.5-Star NABERS Rating</h7>
</p>
<h7><strong>Please click here to view the Information Memorandum
<h7></strong><br>
<h9>* approx </h9>
<hr valign="top" width="100%" size="4px" color="#9D7F4A" align="left" style="border-collapse: collapse;" >
<h4>FOR SALE VIA EXPRESSIONS OF INTEREST CLOSING 5PM (AEDT) THURSDAY, 20 OCTOBER 2016</h4></td>
<tr><td valign="top" width="232" align="left" bgcolor="#201545" cellspacing="0" style="padding-left: 15px; ";><img src="JLL_Logo_Rev_WEB.png" width="97" height="42" alt="JLL"/>
<h5><strong>Rob Sewell<br>
</strong>+61 407 243 229<br>
rob.sewell#ap.jll.com</h5>
<h5><strong>Jamie Guerra</strong><br>
+61 418 849 780<br>
jamie.guerra#ap.jll.com</h5>
<h5><strong>Roger Klem <br>
</strong>+61 423 919 373<br>
roger.klem#ap.jll.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Stuart McCann<br>
</strong>+65 8522 1031<br>
stuart.mccann#ap.jll.com</h5></td>
<td valign="top" bgcolor="#201545" style="color: #2BACE2; padding-left: 15px;"><img src="KnightFrank_LR.png" alt="KnightFrank" width="108" height="54"/>
<h5><strong>Guy Bennett<br>
</strong>+61 418 808 548<br>
< guy.bennett#au.knightfrank.com</h5>
<h5><strong>Lukas Weeks</strong><br>
+61 434 957 537<br>
lukas.weeks#au.knightfrank.com</h5>
<h5><strong>James Parry</strong><br>
+ 61 408 553 000<br>
james.parry#au.knightfrank.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Neil Brookes<br>
</strong>+65 8309 4985<br>
neil.brookes#asia.knightfrank.com</h5></td>
</tbody>
</table></tr>
</body>
</html>
There are 2 columns/cells in this section and both are sitting with a massive gap between the (missing) logos and the text above it and I can't figure out how to close it...
Please help!
Thanks
P.S. the top code is not to the end. But I wasn't allowed to show the rest as it was "too much HTML" not enough question...
I HAVE THE ANSWER -
at the very end the
is after & and should be before them.
Simple as that. Swapped it in front and all fixed!
First of all, this is NOT how you use tables!
W3Schools Tables Link
Secondly, the space after each email field is the margin for the h5 tag. See that all your data is wrapped in an h5 tag? Those provide a top-bottom margin. Try removing it to see the effects. You cant call these "cells" because you are not wrapping the individual items in td tags.
Also, dont forget to close your tables.
The text blocks inside my table do not render correctly when viewed in Apple Mail on the iPhone. However, the text appears fine on Outlook 2003, 2007, 2010, and Apple Mail on the desktop. On the iPhone it does not reduce with the rest of the email. The body email appears to render correctly, but not the footer text (both of which are inside tables). The only other place the text does not appear correctly is the date line at the top.
This is the portion of the style sheet affecting the footer:
.FooterText {
font-size: 7pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 11pt;
}
a.FooterLink {
font-size: 7ptem;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 6pt;
font-style: normal;
text-align: center;
}
</style>
</head>
This is the code for the footer area:
<table width="650" border="0" cellspacing=0 cellpadding=0 bgcolor="#0064C8">
<tr>
<td width="2%"> </td>
<td width="19%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Unsubscribe</strong></p>
<p class="FooterText">You are receiving this email because you are a member of NALP.</p>
<p class="FooterText">To unsubscribe from this [email type] related emails, please
<unsubscribe style="text-decoration:none; color:#FFFFFF;">click here</unsubscribe>
.</p></td>
<td width="26%" style="padding-top: 15px; padding-left: 12px; padding-right: 10px; padding-bottom:25px" class ="FooterText"><p class ="FooterText"><strong>Discover NALP</strong></p>
<p>About NALP<br />
Conferences & Events<br />
Member Portal<br />
NALPconnect<br />
<a href="https://netforum.avectra.com/eweb/shopping/shopping.aspx?site=nalp&webcode=shopping&cart=0&shopsearchCat=Merchandise&sort=4&" class="FooterLink" >Bookstore</a><br />
Job Center</p></td>
<td width="28%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class="FooterText"><strong>About NALP</strong></p>
<p class="FooterText">NALP believes in fairness, facts, and the power of a diverse community. We work every day to be the best career services, recruitment, and professional development organization in the world because we want the lawyers and law students we serve to have an ethical recruiting system, employment data they can trust, and expert advisers to guide and support them in every stage of their careers.</p></td>
<td width="24%" style="padding-top: 15px; padding-left: 10px; padding-right: 10px; padding-bottom:25px" class="FooterText"><p class ="FooterText"><strong>Contact Us</strong></p>
<p class="FooterText">NALP<br />
1220 19th Street, NW<br />
Suite 401<br />
Washington, DC 20036</p></td>
</tr>
</table>
I've tried some a media query to reduce the font size but doesn't seem to work either:
#media only screen and (max-device-width: 480px) {
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
}
a.FooterLink {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
color: #FFFFFF
}
.RegisteredFooterText {
font-family: Verdana, Geneva, sans-serif;
font-size: 4pt;
font-style: normal;
text-align: center;
}
}
First of all use text size in pixels, and add this in your style: -webkit-text-size-adjust:none;
ie:
.FooterText {
font-size: 5pt;
font-family: Verdana, Geneva, sans-serif;
color: #FFFFFF;
vertical-align:top;
line-height: 8pt;
-webkit-text-size-adjust:none;
}