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

There seems to be a malfunction in the functionality of my Django template navbar

Within my project, I am utilizing two templates named base.html and contact.html. The contact.html template extends the base.html template, and these are the only two templates in use. When I navigate to the blog or about section by clicking on them, the p ...

htmldjangodjango-viewsdjango-urls

How can one generate an HTML element using a DOM "element"?

When extracting an element from an HTML page, one can utilize a DOM method like .getElementById(). This method provides a JavaScript object containing a comprehensive list of the element's properties. An example of this can be seen on a MDN documentat ...

javascripthtmldom

Switching markdown data into HTML within a Django and React application

I am considering the best way to store blog content in my database so that I can easily display it on an HTML page using an AJAX call. After conducting research, I have found suggestions to store the blog post as markdown, which seems logical since it supp ...

htmldjangoreactjsdjango-rest-frameworkmarkdown

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

Equal height elements - Bootstrap

Is there a way to make all elements in a list the same height, even if one element has more text than the others? I've been using divs for this purpose, but I'm open to switching to li items. Any advice on the best approach? I'm currently w ...

htmlcsstwitter-bootstrap

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

React Native: The behavior of the 'top' property is consistent, while the 'bottom' property is not performing as anticipated

Within my React Native application, I have implemented the following code: <View style={{ width: 50, height: 50, borderWidth: 1, }} > <View style={{ width: 5, height: 5, backgroundColor: 'red', top: 10, ...

htmlcssreactjsreact-nativecss-position

Mysterious issue with loading images in HTML and PHP

I've been dealing with a puzzling issue on my website design project. The logo image won't load in Firefox unless you hover over the ALT text, then it finally appears. However, this isn't an issue in IE where the logo displays properly. Thi ...

cssimagehtml

Attaching a Stylesheet (CSS) without being inside the HEAD Tag

After seeing numerous inquiries about this topic, I have yet to find the answer I seek. My main question is whether it is feasible to connect an external stylesheet in a location other than the HEAD tag. I am facing this issue because I need to use Conflu ...

htmlcssstyleshead

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

htmlreactjscssmaterial-ui

Attempting to achieve a carousel animation using jQuery

Upon loading the page, only one character out of four is displayed. Two arrows are provided - one on the left and one on the right. Clicking on the left arrow causes the current character to fade out and the previous character to fade in. Clicking on the r ...

javascriptjqueryhtmlcss

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

javascriptjquerycsssyntax

The keyboard automatically disappeared upon clicking the select2 input

Whenever I select the select2 input, the keyboard automatically closes $('select').on('select2:open', function(e) { $('.select2-search input').prop('focus',false); }); Feel free to watch this video for more i ...

javascripthtmlcssjquery-select2

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

Throughout my experience with HTML/CSS, I have predominantly relied on themes that included this feature by default. However, as I now venture into building from scratch, I find myself struggling to recreate it. You'll notice that I have a stylish fi ...

javascripthtmljquerycssbootstrap-4

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

Tips for achieving accurate encoding when using groovy's HtmlParsing on a website

I am currently working on a Groovy script that involves parsing HTML from a Swedish website, and I need to extract the special characters Å, Ä, and Ö. Although this is just an example and not the actual site I am scraping, the problem remains the same. ...

htmlgroovycharacter-encoding

Tips for displaying a variable that contains HTML in PHP

I'm facing an issue with a variable that holds an HTML iframe obtained from a third-party package. When I try to display it using <?php echo $variable ?>, the page shows the raw HTML with tags instead of rendering it properly. Can someone guide ...

phphtml

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

"Experiencing technical difficulties: Website not functioning properly on

I recently created this website. While it functions perfectly on desktop computers, I am encountering issues when trying to access it on mobile or tablet devices. My instinct tells me that the problem may be related to a large css animation on the homepa ...

htmlcssanimationmobilecrash