Tips for positioning a text link alongside an image link within a table row using only inline styles

I am struggling to align text and an image link next to each other within a table row. The image keeps moving up and down despite my efforts to use various alignment and display block styles. I am only able to use inline CSS and need it to display correctly on different devices and desktop email clients. The code I have posted is a nested table but I can't seem to get the elements to align properly. While the code looks fine when viewed in a browser, once it's in Outlook and other programs, the image shifts within the row.

Here is an example image

<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11"></a>
</td>
</table>
htmlcssemailoutlook

Answer №1

Testing this code with Litmus has shown consistent results across various email clients due to its simple design. By setting the font size, line-height, and image size to 13px, alignment became much easier. A unique approach was taken by using vertical-align: -2px; on the image in order to address Outlook's buggy support for certain values.

While Gmail, Apple, IOS, Android, and other email clients displayed content consistently, there was a slight shift in Outlook causing a pixel discrepancy. To enhance the overall appearance, text-decoration: none; was added to the hyperlinks.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
  <tr>
    <td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
      <a href="tel:5555555555" style="font-size: 13px; text-decoration: none;">555-555-5555</a> | 
      <a href="https://stackoverflow.com" style="font-size: 13px; text-decoration: none;">stackoverflow.com</a>  | 
      <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13"></a>
    </td>
  </tr>
</table>

Best of luck with your email design!

Answer №2

I recommend using the valign="bottom" attribute for all td elements. Additionally, consider adding some padding-bottom to the img tag to fix the small vertical misalignment between text and image (which is only 1px in this specific case):

<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
<a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
</td>
<td height="100%" align="left" valign="bottom">
<a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11"></a>
</td>
</table>

Answer №3

Creating HTML for emails feels like taking a nostalgic journey back to the 90s!

If you enclose all your <td> elements inside a table row <tr> and align them to the bottom,

simply use the following code snippet:

<table cellspacing="0" cellpadding="0">
  <tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
    <td height="100%" align="left">
      <a href="tel:5555555555" style="font-size: 13px;">555-555-5555 | </a>
    </td>
    <td height="100%" align="left">
      <a href="https://stackoverflow.com" style="font-size: 13px">stackoverflow.com  | </a>
    </td>
    <td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
      <a href="https://www.linkedin.com/company/stack-overflow/"><img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11"></a>
    </td>
  </tr>
</table>

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

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

cssfluid-images

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Restoring text boxes to their original styling

I've been working on a jQuery script that scans through form input elements and turns their border color to red if they are empty. When the submit button is pressed, it reassesses the elements; this time I'm trying to revert the textbox back to i ...

jqueryhtmlcss

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

javascriptjqueryhtmlcss

Can custom HTML elements be designed to function similarly to standard ones?

What is the best way to create a custom HTML element that functions as a link without relying on inline Javascript? For instance: <x-button href="...">...</x-button> Can I develop an element like <x-button> that can accept an attribute ...

javascripthtml

Ways to bypass a transition using JavaScript

Hello everyone, I would like to start by apologizing for any mistakes in my English. I have been working on a website, which is currently available here: As you scroll down, the height of the image below the menu decreases. I am trying to make the navig ...

javascripthtmlcsscss-transitions

Ionic app encounters issue fetching local JSON data

I have been working on my Ionic application and I encountered an issue when trying to load local JSON data into it. I set up a http.get in my javascript to retrieve the data, but for some reason it's not showing up in the application. It seems like th ...

javascripthtmljsonionic-framework

Creating a responsive YouTube video embed within a div container with a fixed background image

Hello there, I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions. The w ...

htmlcsswordpressiframe

Extracting data from a dropdown list with beautifulsoup

Could someone please assist me in scraping a list of dates from: The dates can be found within a dropdown menu just above the option chain. I have experience scraping text from websites, but this specific text is utilizing 'select' & 'o ...

pythonhtmlweb-scrapingbeautifulsoup

Why is Emmet's document snippet failing to include the "http-equiv='X-UA-Compatible'" meta tag?

While experimenting with the Emmet boilerplate in VS Code for HTML files, I noticed a discrepancy. Online tutorials show that there should be 3 meta tags when using Emmet, but when I try it in VS Code, I only see 2 meta tags. One meta tag seems to be missi ...

htmlvisual-studio-codeemmet

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

javascriptjqueryhtmlcssarrays

Using JQuery to cycle a class with a timer

My list has the following structure <div id="slider"> <ul> <li class='active'> a </li> <li> b </li> <li> c </li> <li> d </li> <li> e </li> </u ...

javascriptjqueryhtmltimer

``How can I lock the top row of an HTML table containing input fields in place while

Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...

javascripthtmlcss

Styling DL and DD elements with Zend Framework decorators

When incorporating a Subform named "Step1," your code will look like this: <dl class="zend_form"> <dt id="Step1-label"></dt> <dd id="Step1-element"> <fieldset id="fieldset-Step1" class="Step"> < ...

htmlzend-frameworkdecorator

Switch the background color of the body when hovering over a link

Is it possible to change the page background when hovering over a a using only CSS? I am searching for a solution that does not involve any JavaScript. I understand that we can access child elements with CSS, but I am unsure if it is possible to target th ...

htmlcss

Creating uniform image heights using Flexbox

My webpage features a library of books, with each book displayed in rows within a flexbox container. Each book is represented as a separate block consisting of a heading (the book's name) and an image of the book cover directly below it. I'm curr ...

htmlcssflexbox

Guide to modifying the background image color using CSS

Currently, I am attempting to modify the color of an image using CSS. This particular image is a key element in the layout of my website. To get a better understanding, you can view a screenshot of the element here: , and see an example post containing the ...

csswordpressstyling

Transfer a variable from one PHP page to another and navigate between the two pages

I am just starting to learn PHP and I have a scenario where I need to retrieve the last ID from the database. For each ID, I need to fetch the state and the associated link. If the state is equal to 1, then I need to extract some content from the link (whi ...

javascriptphpjqueryhtml

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...

htmlcssresponsive