Formatting Outlook HTML Signatures

I'm currently designing an HTML email signature for Outlook, but I'm having trouble with formatting and ensuring it looks consistent across different devices.

When I preview the HTML in my browser, it appears exactly as I intended. However, I am facing issues with the left row, which is meant to display a logo of equal width. I attempted to achieve this using text-justify: distribute, but I suspect that this feature is not supported by Outlook's outdated rendering engine. Does anyone know of a more reliable method to achieve this effect? I also experimented with letter-spacing, but the results varied too much between devices.

This is the desired appearance of the signature:

<html>
<body>
    <table width="380" cellspacing="0" cellpadding="0" style="margin-top:0px; margin-bottom:0px; font-family:arial; color: #231f20; vertical-align:top"">
        <tr>
        <td style="FONT-SIZE: 14pt; border-right:#231f20 1.5px solid">
        <span style="white-space:nowrap; font-weight:bold; display: inline-block; text-justify: distribute; text-align-last:justify; letter-spacing:2.7px;">
        <span style="display:block; margin-bottom:4px;">ABCDEF<br></span>
        <span style="display:block; margin-bottom:4px;">GHJKL<br></span>
        <span style="display:block;                   ">MNOPQR</span>
        </span>
        </td>

        <td
            style="font-size:7.5pt; line-height:6pt; vertical-align:bottom; padding-bottom:3px; padding-left:17px">
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">Lorem ipsum dolor sit amet, consetetur sadipscing</span>
            <br>
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">
                Lorem ipsum dolor sit amet, consetetur</span>
            <br>
            <span style="display:block; white-space:nowrap; margin-bottom:0px;">Tel: <a href=""
                    style="text-decoration:none!important; color:#000000">+01 234 56789</a> · <a href="mailto:example.com"
                    style="text-decoration:none!important; color:#000000">www.example.com</a></span>
            <br>
            <span><a href="http://example.com" 
                    style="white-space:nowrap; text-decoration:none !important; color:#000000; font-weight:bold;">www.example.com</a></span>
    </td>
    </tr>
    </table>
</body>
</html>

Here is how the signature appears after importing it into Outlook:

htmlcssoutlooksignature

Answer №1

Greetings Andre and thank you for joining us here at Stack overflow,

I'm afraid I have to deliver some bad news - achieving what you want in Outlook is not possible as the attribute is not supported. Letter spacing will only be effective if you use specific pixel values, but even then it may not render consistently across different email clients.

Regrettably, for cross-client compatibility, your best bet would be to utilize an image. You can opt for a larger image size and scale it down to ensure a visually pleasing outcome.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure the form is properly validated before initiating the submission process on 2checkout

Attempting to prevent the form from being submitted, I implemented the code below. Typically, this method works perfectly fine. However, when integrating 2checkout js (), it does not function as intended. <form onSubmit="validate(); return false;" meth ...

javascriptjqueryhtml2checkout

spark of unique substance

Having trouble with cycle2 as all images are briefly displayed when the page loads. I tried the recommended solution http://jquery.malsup.com/cycle/faq.html but it didn't stop the flashing, indicating a different issue: The suggested fix for Cycle is ...

javascriptjqueryhtmlcssjquery-cycle2

Create various designs for a section of a webpage

My goal is to create a coding playground using flex-box to position different panels. Here is an example in JSBin, with the following html code: <div class="flex-box"> <div class="col" id="html-panel"> <p>html</p> </div& ...

javascriptcssangularjsangular-ui-routerflexbox

Create a captivating sliding effect on Windows 8 using a combination of CSS and JavaScript

I believe that using css3 alone can achieve this effect, but I'm struggling with understanding properties like 'ease' in css3. This is the progress I have made so far: http://jsfiddle.net/kwgy9/1/ The word 'nike' should slide to ...

javascriptjquerycss

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Check out this HTML tag: <a href="#" id="navBar_navBarInput_3_subNavDropdownInput_0_subNavLinkInput_0" onclick="redirectPost(4,'EntryData.aspx');">My Cool Link</a> The Javascript function "redirectPost" function redirectPost(id, ur ...

javascripthtmlwebrequest

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...

javascripthtmljquerycss

Display of CSS color choices organized by row input

Is it feasible to dynamically color each table row based on the input in a designated column for that row? For example: B1 = 1 // Red row B2 = 1 // Red row B3 = 3 // Blue row B4 = 2 // Green row B5 = 1 // Red row And so forth? The datatable wi ...

csscolorsstylingcss-tables

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

XPaths are used to verify the accuracy and relevance of text content

Here's a snippet of HTML I need help with: HTML Code: <a id="pINumber" href="csf.ajax?et=p.preparationinsurance">PASS170XX</a> XPATH to identify the above element //*[@id="pINumber"] I am looking to create an XPATH that checks for the ...

htmlseleniumdomxpath

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

phphtmlajaxdatabase

What is the superior choice for developing a card game: creating it using SVG and the kinetic.js library or utilizing the oCanvas library

When it comes to creating a card game, which platform is more suitable: SVG or canvas using kinetic.js or oCanvas library? In terms of performance, event handling, and object tracking, which option would be more efficient? Additionally, if there is a bet ...

htmlhtml5-canvas

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

javascriptjqueryhtmlcontenteditablemaxlength

Application of id missing on all buttons in Bootstrap tour template

I'm having an issue with applying a new id to the next button in a Bootstrap tour template. I added the id to the button, but it only seems to work for the first stage and not the subsequent ones. Can anyone provide insight into why this might be happ ...

javascripthtmlcsstwitter-bootstrapbootstrap-tour

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

I am working on an Angular app (using Angular 11.2.4 with Bootstrap 4.5.3) and facing an issue where the navbar is not rendering correctly on screens smaller than ~580 pixels wide. Even when I click the toggler to 'expand' the collapse region, n ...

htmlangularbootstrap-4angular-ui-bootstrap

Horizontal scroll box content is being truncated

I've been trying to insert code into my HTML using JavaScript, but I'm facing a problem where the code is getting truncated or cut off. Here's the snippet of code causing the issue: function feedbackDiv(feedback_id, feedback_title, feedb ...

javascripthtmlcssscrollhorizontal-scrolling

Troubles with CSS drop down alignment in Internet Explorer 7

I've been racking my brain all morning trying to solve this issue. My current project involves creating a website for a client, and I'm having trouble getting the dropdown menu to position correctly in IE7. It's working fine in all other br ...

htmlcssxhtmlinternet-explorer-7

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

I am currently using Bootstrap 5 to design a website and have incorporated a dropdown feature into the navigation bar. On desktop, when hovering over the dropdown, it should open, while on mobile, clicking the dropdown should toggle its visibility (open/cl ...

htmlcssfrontendnavbarbootstrap-5

What is the best way to add an insert button to every row?

Take a look at the image provided. When I click on any register button, the last row is being inserted instead of the desired row. What I'm aiming for is this: when I click register, the entire selected row should be stored in a separate table. Whe ...

javascriptphphtmlmysqli

Scrolling to specific ID scrolls only in a downward direction

I have been using fullpage.js for my website and I am facing an issue. When I create a link and connect it to an id, everything works perfectly. However, I am unable to scroll back up once I have scrolled down. Here is the HTML code: <a href="#section ...

javascripthtmlcssonepage-scroll