Image in an Outlook email surrounded by padding and enclosed in a paragraph

I am facing an issue with my email signature setup in Outlook Live where there is a white space below the image.

After trying to add vertical-align:bottom to the CSS, it seems that Outlook Live does not accept it. The code for my HTML in Outlook 20xx is as follows:

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="">
    <v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style='z-index:-9999999999;position:relative;vertical-align:bottom;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;'> 
        <v:imagedata src="image_bestanden/image001.png" o:style="vertical-align:bottom;" o:href="https://logos.solvarea.nl/logo-klein.png"/> 
    </v:shape>
</span>

The code when viewed from Outlook Live webmail:

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <img data-imagetype="AttachmentByCid" originalsrc="cid:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284145494f4d1818190658464f6818196c1e19691a6d066d191818116c1e18">[email protected]</a>" style="cursor: pointer;" crossorigin="use-credentials">
</p>

The desired code (with vertical-align:bottom added) would be:

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <img data-imagetype="AttachmentByCid" originalsrc="cid:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed84808c8a88dddddcc39d838aaddddca9dbdcacdfa8c3a8dcddddd4a9dbdd">[email protected]</a>" style="cursor: pointer;vertical-align: bottom;" crossorigin="use-credentials">
</p>

Despite trying to add inline styling for vertical align, Outlook Live rejects it. Please assist me in achieving the desired result without wasting more time on testing.

htmlcssoutlook

Answer №1

If you are looking to keep the image at the bottom position, one way to achieve this is by using the absolute property on the image wrapper (in this instance, the <span> tag). Simply add the style bottom: 0; to the wrapper to ensure that the image container always remains at the bottom.

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="position:absolute;bottom:0;">
        <img width="142pt" height="106pt" src="image_bestanden/logo-klein.png" u1:shapes="Afbeelding_x0020_7" v:shapes="_x0000_i1025" style="z-index:-9999999999;position:relative;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;"><!--[endif]--><o:p></o:p>
</span>

Answer №2

We've come up with two different approaches to solve this issue:

  1. To address the problem, one solution involves adding position:absolute;bottom:0; to the wrapper of the image enclosed within a td element. For example:

     <td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
   <span style="position:absolute;bottom:0;">
     <img width="142pt" height="106pt" src="image_bestanden/logo;">
   </span>
 </td>

  2. Alternatively, another method is to apply the calculated padding to the td element containing the hidden image.

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

Steps to display a variable in JavaScript on an HTML textarea

I'm working on a JavaScript variable called 'signature' var signature; //(Data is here) document.write(signature) Within my HTML document, I have the following: <div id="siggen"> <textarea id="content" cols="80" rows="10">& ...

javascriptjqueryhtmlcssajax

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss

Using force-directed layout to access and retrieve specific data from external or internal data sources

Just starting out with d3js and currently working on modifying the Force directed layout found at http://bl.ocks.org/mbostock/1153292 I have managed to make it so that when I hover over the node circles, the corresponding source value filenames should app ...

javascripthtmlcssjson

Customizing background images for individual web pages

Having some trouble changing the background image on my Squarespace website homepage. After exploring forums and inspecting my website's source code, I tried using the id #collection-51648018e4b0d7daf0a7cece to target just the homepage background but ...

htmlcssbackground-imagesquarespace

What is the best way to ensure a bottom tooltip stays perfectly aligned with the right edge of its corresponding element?

Currently, I am trying to implement a tooltip above my progress bar. However, the small tooltip that I have is not functioning correctly... This is how it currently appears: https://i.sstatic.net/ZJUyT.png I need the tooltip to display above the white d ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Adjusting the Size of Dialog Windows in Lightswitch HTML Client

When using the MS Lightswitch HTML Client, if a dialog menu option contains too many characters to fit within the length of the dialog window, the text will be cut off and replaced with (...). Is there a way to add a scroll bar or adjust the text size in ...

jqueryhtmlcssvisual-studio-lightswitchlightswitch-2013

Addressing responsiveness problems with Bootstrap navigation bar

Seeking assistance with setting up the fundamental bootstrap grid system. Despite my efforts, I am unable to make it work. Could someone guide me in creating the basic structure for the Navbar above? Specifically, focusing on using columns and rows with p ...

jqueryhtmlcsstwitter-bootstrap

Creating a React button animation with CSS vibes

When I click a button, I want a subtle sparkle to appear and disappear quickly, within half a second. I've thought about using a gif, but it requires a lot of manual artistic work to achieve the desired effect. Is there a way to utilize the Animatio ...

cssreactjsreact-native

Help Needed: Adding a Simple Element to jQuery Tabs Script

I recently came across a fantastic jQuery tabs script on a website called Tutorialzine. The link to the article can be found here. As I was implementing this script, I realized I needed to customize it by adding specific classes to certain tabs. Specifica ...

javascriptjquerycss

I need a layout similar to the navbar on http://thecoloradan.com/ but I am not asking for instructions on how to do it

Have you seen the stunning navbar on this website? It appears to merge with the background upon loading, then smoothly shifts to the top of the page as you scroll. The transition is accompanied by a lovely animation. I am curious about the steps needed to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Prevent scale animation for a specific section of the icon using CSS

I need help in preventing the scale animation of the :before part of the icon class from occurring when the button is hovered. The current behavior is causing the arrow to look distorted on hover... Link to the code on Codepen HTML <div class="se ...

javascripthtmlcss

How to use Jquery to fetch the value of a td element nested inside another

After consulting the manual, I am trying to find a way to extract the value in the second column of a table when a specific span is clicked. However, the challenge is that the click event is currently being triggered by the first span cell. Here is the jQu ...

javascriptjqueryhtmljquery-ui

The dropdown menu is obscured by the toolbar

When using ionic4/angular, I want a dropdown menu to display upon clicking on the ion-avatar. However, the dropdown menu is hiding in the toolbar. I have tried setting z-index but it did not work. Any suggestions would be appreciated. You can find the sta ...

htmlcssionic-frameworkbootstrap-4ionic4

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

cssselenium

Harnessing the power of the Zurb Foundation 4 grid system to create visually appealing list elements

When it comes to styling the layout of a page, Foundation 4's grid system with its mobile-first approach is a no-brainer, especially if you're already using other foundation elements like textual content, images, and sidebars. On the example pag ...

csszurb-foundation

The combination of jQuery, using .load method in javascript to prevent scrolling up, making XMLHttpRequest requests, updating .innerHTML elements, and troubleshooting CSS/JS

While utilizing this code, CSS and Javascript are disabled (only HTML loads): function loadContent(limit) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status ...

javascriptjqueryhtmlcssajax

Adding npm packages to your Vue.js application

My Vue app is structured like this (auto created by vue init webpack myProject): index.html components/ -main.js -App.vue I am trying to include npm packages, such as https://github.com/ACollectionOfAtoms/atomic-bohr-model. Following the instructions, I ...

javascripthtmlnode.jsnpmvue.js

Avoid displaying "undefined" on HTML page when Firebase database value is empty

I am trying my best to explain my issue, although I struggle with scripts. Please bear with me and help me improve. ˆˆ Below is the script I am working on. The goal is to display all records with a date set for 'today or in the future'. Progr ...

javascripthtmlfirebase

What is the method to deactivate child elements within an element that possesses the disabled attribute in Polymer?

What are some effective methods for disabling children elements when at least one parent element is disabled? I have a form with nested groups and fields that can be disabled based on certain conditions. Different parent elements may be disabled independe ...

htmlpolymerdisabled-inputrecursive-datastructures

Guide to utilizing the bootstrap grid system to stack below a width of 480px

I have been grappling with this issue, but unfortunately, there seems to be a lack of information on how to resolve it. I have gone through numerous old posts where individuals are "modding" the files and creating their own col-ms (medium-small) that stack ...

csstwitter-bootstrap