Menu
EDIT I have implemented the html as a signature, but the problem im having now is very weird.
I have a signature and everytime i send it from outlook to a web mail service outlook put tags in the html and messes up all the spacing. How can i fix that.
I have a question about the Outlook signature. For my work I have to make a signature so it looks more professional. I've made a test to see how I need to implement it into the HTML of the signature, but I can't quite figure it out.
This is the code which Outlook generates:
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:-520092929 1073786111 9 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
p.MsoAutoSig, li.MsoAutoSig, div.MsoAutoSig
{mso-style-priority:99;
mso-style-link:"E-mailhandtekening Char";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
span.E-mailhandtekeningChar
{mso-style-name:"E-mailhandtekening Char";
mso-style-priority:99;
mso-style-unhide:no;
mso-style-locked:yes;
mso-style-link:E-mailhandtekening;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
@page WordSection1
{size:595.3pt 841.9pt;
margin:70.85pt 70.85pt 70.85pt 70.85pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang=NL style='tab-interval:35.4pt'>
<div class=WordSection1>
<p class=MsoAutoSig><span style='mso-fareast-font-family:Calibri;mso-fareast-theme-font:
minor-latin'><o:p> </o:p></span></p>
</div>
</body>
</html>
I really don't understand where I need to put in my code. This is my code:
<style>
a {
text-decoration: none;
color: inherit;
}
.wrapper {
width:50%;
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.topText {
font-size: 11pt;
margin-bottom: 5px;
}
.topLine {
border-top: 2px solid #C80032;
margin-bottom: 5px;
}
.content {
height:100px;
width: 100%;
margin-bottom: 5px;
}
p {
font-size:10pt;
}
.left-content {
float:left;
margin-right: 140px;
}
.right-content {
}
.name {
margin: 0px !important;
float: left;
}
.address {
margin: 0px 0px 0px 20px;
}
.address_A {
margin: 0px 0px 0px 30px;
}
.address_M {
margin: 0px 0px 0px 14px;
}
.bottomBar {
float: right;
width:74.5%;
height: 25px;
background-color:#7F7B7B;
color: white;
font-size: 12pt;
text-align: left;
margin-left: 18px;
}
.tableStyle{
margin-bottom: 5px;
}
.social-Blocks
{
background-color:white;
width: 25px !important;
height: 25px !important;
float:left;
margin-left: 15px;
text-align:center;
font-size: 23px;
color: #0987B2;
}
.bottom-bar-first{
float: left;
width:11%;
height: 25px;
background-color:#7F7B7B;
color: white;
font-size: 12pt;
}
.bottom_Span{
margin-left: 10px;
}
.suplaconLogo{
height:90px ;
width:190px;
}
.logo{
float: right;
}
</style>
<link rel="stylesheet" href="style.css"></head>
<div class="wrapper">
<div class="topText">Met vriendelijke groet,</div>
<div class="topLine"></div>
<img class="logo" src="images/logo.png" height="80" width="350">
<table class="tableStyle" cellpadding="0">
<tr>
<td><span><strong>Information</strong></span></td><td><span class="address_A"><strong>Information</strong></span></td>
</tr>
<tr>
<td><span class="name">T</span><span class="address"> Information</span></td>
<td><span class="address_A">Information</span></td>
</tr>
<tr>
<td><span class="name">M</span><span class="address_M">Information</span></td>
<td><span class="address_A">Information</span></td>
</tr>
<tr>
<td><span class="name">E</span><span class="address">Information </span></td>
<td><span class="address_A"><a href="">Information</a></span></td>
</tr>
</table>
<div class="bottomStyle">
<div class="bottom-bar-first"></div>
<div class="social-Blocks"><a href="
"><span class="icon-linkedin center" target="blank"></span></a></div>
<div class="social-Blocks"><a href="" target="blank"><span class="icon-facebook2 center"></span></a></div>
<div class="social-Blocks"><a href="" target="blank"><img src="" height="25"></a></div>
<div class="bottomBar"><span class="bottom_Span"><strong> Information</strong></span></div>
</div>
</div>
How can I include my code in the code of Outlook, or where do I need to put my code? I found this, and it seems that my CSS is indeed compatible:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007
248
linking to an external stylesheet is not supported by almost all email clients (for sure Outlook doesn't support it).
so I suggest you put everything in the head > style tag
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
