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

What steps can I take to embed a video in HTML without autoplaying in a browser?

I have a simple but important question that I need help with. I am creating a compilation of family videos and I want to put them all on one page or in an HTML file. However, when I embed/link a directory file of the video into the HTML, it automatically ...

html

Distinguish between individuals who are sharing login credentials

At the moment, I am distinguishing users by using $_SESSION[id]. However, I have noticed that some users are sharing their login information on multiple devices at the same time. This could potentially create issues in the system. If there is a method to ...

phphtml

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

Update the class name of an element depending on the URL

Hey there! I'm working on customizing the style of some elements (specifically tds within a table) based on the current URL. Here are the pages I'm targeting: http:\\domain\site\welcome.html http:\\domain\site& ...

jqueryhtmlcssclass

Styling with Radial Gradients in CSS

Struggling to create a banner with a radial gradient background? I'm almost there, but my code isn't matching the design. Any assistance would be greatly appreciated as I can't seem to get the right colors and only part of the first circle i ...

cssvue.jsgradientbannerradial-gradients

Customize the progress bar color in Bootstrap by setting a unique color to it

Is it possible to apply a custom color to the progress bar in Bootstrap that is not one of the standard options like success, info, warning or danger? I attempted adding the following code snippet to my bootstrap-theme.css file: .progress-bar-custom { b ...

htmlcss

Issues arise when the elements <html> and <body> fail to adhere to a 100

Lately, I've been struggling with various problems related to heights. I was able to resolve the height issues of certain elements using flex:auto and flex-shrink:0. However, I'm facing difficulties getting the HTML and Body tags to cooperate ( ...

htmlcssheight

`Responsive Site with Centered Image Overlay`

I've been attempting to center a small image within a larger one, both of which are contained within a Bootstrap Column. <div className="row justify-content-center my-5 "> <div className="col-xs-10 col-sm-6 my-auto mx-auto" ...

htmlcsstwitter-bootstrapbootstrap-4

Leveraging the p-steps module from PrimeNG for smaller screen sizes

I am facing an issue with resizing the p-steps component from PrimeNG to avoid overflow in smaller screen resolutions. The current code I am using is as follows: <div class="d-flex card mb-4"> <p-steps [model]="items" ...

htmlangularprimeng

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

javascriptcssangularjs

What is preventing select2's multiselect feature from functioning properly when using a CDN?

I have implemented the following code snippet: <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel=& ...

htmljquery-select2

Tips for building a task list using JavaScript only

Is it possible to create a to-do list using only JavaScript in an HTML file with a single div tag? Here is my HTML file for reference: example Here is the structure of my HTML file... <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmllistdomevents

Change the color of a specific day on the Arshaw Calendar using CSS

Can anyone help me with changing the color of the box in the month view in the arshaw calendar? I've been attempting to do so using this script, but my lack of expertise in javascript is proving to be a hurdle. The goal is for this script to be called ...

javascriptjquerycsscalendarfullcalendar

How can you tap into local storage in CSS while utilizing a chrome extension?

Can I access local storage from a Chrome extension's options file using CSS? Is it possible to use JavaScript to define a variable that can be utilized in CSS, or is local storage only accessible through JavaScript? If local storage is restricted to J ...

javascriptcssgoogle-chromegoogle-chrome-extensionlocal-storage

The functionality of the button is disabled once a pop-up JavaScript is implemented

I have encountered an issue with my HTML code that involves a button intended to hide certain content. The problem arose when I implemented a popup feature, causing the button to malfunction. Here is the JavaScript for the popup: $ = function(id) { retur ...

javascripthtml

Arrange the Elements of Select Options

I am currently facing an issue with organizing the elements in my select list. I have two interconnected lists, one containing a list of "models" which I have successfully sorted using the following function: var sel = $('#model'); var opts_lis ...

javascriptjqueryhtml

What is preventing me from using JavaScript to remove this class?

Struggling to implement a skeleton loading screen with CSS classes and JavaScript. The idea is to apply the 'skeleton' class to elements, style them accordingly, then remove the class using a timeout set in JavaScript. However, I'm encounter ...

javascripthtmlcss

Position a div at the center of the page while aligning it inline with another div

Is there a way to center an element on the screen while having another element positioned to its left? I have tried using float left and adjusting the padding of the center element to match the width of the left element. However, this method may not work ...

css

Link clicking does not trigger URL routing properly

I've been tasked with updating our web application, and I'm facing a challenge that I need help with. My boss wants users to be able to click on a link in an email and have the internal company web app directly navigate to a specific page indicat ...

javascriptjqueryhtml

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

javascripthtmlangular