I am experiencing an issue where links are not aligning correctly within table cells in Outlook

In the email preview from Email on Acid, I am seeing some centered text and links, but it is not displaying as expected. Most other email clients are showing it properly.

https://i.sstatic.net/wCPVH.png

Here is a snapshot of how it should look:

https://i.sstatic.net/6B8R1.png

The table structure for these links is as follows:

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center">
                      <center>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a>
                        <span class="copy">© 2015. All Rights Reserved.</span>
                      </center>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

I have utilized Zurb's ink framework to create this design. Here are the additional CSS styles I implemented:

.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }

As there are several CSS manipulations from the Ink framework, here is the link to JSBin for reference:

https://jsbin.com/pewoluwapo/edit?html,output

UPDATE: After following Gortonington's suggestion, the outlook now displays like this:

https://i.sstatic.net/locWn.png

htmlcssemailoutlookzurb-ink

Answer №1

Insert this new guideline: http://jsfiddle.net/9VqkRPcL/. By default, tables will adjust to fit their content.

table {
    width: 100%;
}

Answer №2

Just like web browsers, all email clients have varying levels of support. This means that outlook may not support the center tag.

To ensure compatibility, it's recommended to replace the center tag with a more widely supported method (such as align="center"). Additionally, it's best practice to use &copy instead of the copyright symbol since not all systems may support it. For more HTML codes, you can check out 

<table class="row bg-white">
            <tr>
              <td class="wrapper last">

                <table class="twelve columns footer">
                  <tr>
                    <td class="center" align="center">
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/d86f2f3e-fb48-4dac-a901-fb2c6e764ded.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/83304962-c8e5-4e51-95cd-ffbb46fd9386.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/8fbfc755-58dd-4ad3-9df6-31df23b9b4e0.png" />
                        </a>
                        <a href="#">
                          <img src="https://gallery.mailchimp.com/af37d5e0e2ad3fbc1fc35c915/images/acbdc917-00a3-421b-a56f-2b03d3f7c72e.png" />
                        </a><br/>
                        <span class="copy">&copy; 2015. All Rights Reserved.</span>
                    </td>
                    <td class="expander"></td>
                  </tr>
                </table><!-- /twelve columns -->

              </td>
            </tr>
          </table><!-- /row -->

Answer №3

To tackle the issue with Outlook, utilizing MSO conditional coding could provide a solution. It's also advisable to ensure inline CSS prior to uploading your content, ensuring compatibility with Gmail and other platforms.

Here is an example of MSO conditional code that has not been inlined:

<!doctype html>
<html>
<head>
<style>
.footer a {
    display: inline-block;
  }
  .footer span.copy {
    display: block;
    margin-top: 6px;
    font-size: 10px;
  }
  .footer td.center {
    padding: 30px 0;
  }
  </style>
  </head>
  <body>

<!-- Code snippet goes here -->

Upon reviewing the JSBin of your email as per your comment, it appears that certain images contain conflicting properties causing alignment issues within the table. Two potential solutions are:

1.) Remove the conflicting CSS from the code or after inlining

2.) Create a separate table with defined width for social media icons and copyright info (a more universally compatible approach)

To maintain your existing code post-inlining with Zurb INK without altering it significantly, I nested tables within a TD element at 100% width. This structure helps clear alignments and floats inherited from the parent table. Social icons and copyright info are housed in another nested table within this setup. Additionally, each icon has its own TD within the topmost nested table to avoid layout complications.

Refer below for an outline following inlining your code:

<!-- Nested table structure -->

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

Extract the HTML field value from an AJAX drop-down selection, rather than relying on user input

I have a field that allows users to select from a dropdown list using the following code: $(function() { $('.serial_number').live('focus.autocomplete', function() { $(this).autocomplete("/admi ...

phphtmlajax

Utilizing form elements within a label_tag in Ruby on Rails

I am looking to wrap my text fields and other form elements in a label tag: <label for="response">Tell me what you think: <input type="text" id="response" name="response"/></label> This allows me to apply CSS like the following: label ...

htmlcssruby-on-railsruby-on-rails-3ruby-on-rails-3.2

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

Unable to display texture and color on .obj files in Three.js

After introducing a new model in .obj and .mtl formats into my three.js code, I encountered an issue where the color of the model would turn white, regardless of its original color or texture. Below is a snippet of the code related to the pig model: // ...

javascripthtmlcssthree.js

Instructions for inserting an HTML page into a DIV using a menu LI click event

I have encountered a frustrating issue. My plan is to create a UL menu with varying amounts of LI elements inside. When each LI element is clicked, I want to load a new HTML page into my "Content-DIV". I've done extensive research and discovered Aja ...

javascriptjqueryhtmlcssajax

Error: You cannot assign a value to the left side of the console, it is

JavaScript Code if ($language == 'english') { var displayvalue = ""; if (data[i].report_name.length >= 20) { displayvalue = data[i].report_name.substr(0, 20) + "..."; } else { displayvalue = data[i].report_name; } subMDesign ...

javascriptjquerycssangularjs

What are some ways to enhance the appearance of the initial two items in a list through CSS?

Is it possible to enhance the appearance of the first 2 elements in a list using CSS for IE8 compatibility? Here is an example of the format: <ul id="list1" style="margin-left:-20%;font-weight:bold" > <li class="xyz"> Element1 </li> ...

css

What is the best way to restrict the number of characters in a textarea when new data is being added

I am currently going through the steps below: 1. Setting up a textarea with a maximum length of 50 characters. 2. Implementing a button that, when clicked, appends text to the textarea. Problem: The maxlength validation does not kick in if the button is ...

javascripthtml

jQuery enables the creation of fresh form fields

Currently, I am working on a form that initially consists of 2 text input fields. The typical use case involves the user entering a number in one field and their name in the other. Following this, the page updates itself without reloading. However, there a ...

javascriptjqueryhtmlformsdynamic

The function I created is having trouble connecting to the controller.js file

My JavaScript controller file function ServicesCtrl($scope) { console.log("Greetings from ServicesCtrl"); $scope.message = "Hello!"; } The main HTML file <html> <head> <title>The Complete Web Development Stack</ti ...

htmlangularjsangularjs-controller

Ways to design a JavaScript-generated element

I am attempting to customize a text box generated using JavaScript by assigning an ID to the created element in the following manner: const x = document.createElement("INPUT"); x.setAttribute("type", "text"); document.getElementById("textBoxForText").app ...

javascripthtmlcss

Personalized map pin styling

Currently, I am following a tutorial on this link: http://jsfiddle.net/doktormolle/jcHqt/. However, the rendering of the marker is not up to par, especially when using my own custom marker as it appears quite pixelated. I am looking for assistance in ach ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

Send a parameter to be used as a link attribute in a pop-up box

I am seeking a way to pass a URL for my modal that relies on extracting the adder variable from the main HTML document. While I understand how to pass variables as text (using spans) to a modal, I am unsure how to incorporate a variable in an anchor <a ...

javascriptjqueryhtmltwitter-bootstrap

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

javascripthtmlcsssasswatch

Show the selected options from a multiple choice dropdown in an input field

<select name="place_have" class="form-control" multiple> <option value="locker">locker</option> <option value="storage">storage</option> <option value="bathroom">bathroom</option> <option value=" ...

javascriptjqueryhtml

Eliminate image line breaks associated with hyperlinks without the need for table cells

My webpage includes a <div> with various images: <div> <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> </div> However, whenever I add a hyperlink to any of the images, it causes an unwante ...

htmlcss

Excessive grid image spills over surrounding elements

Here are the code snippets. Everything seems fine here, but in my browser, the last image overflows on the blue section and the text below it is not visible at all. This issue occurs with the third list item of the unordered list. /**************** Cust ...

htmlcss

JavaScript - Issues with Cookie Setting

I created a function for setting cookies: function storeCookie(cname, cvalue, exdays){ var d = new Date(); d.setTime(d.getTime() + (1000*60*60*24*exdays)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + ...

javascripthtmljsonfunctioncookies

Creating an "Enter" Key in ASP.net Using C#

Here is the code snippet I wrote using C#: using (StreamWriter streamWriter = File.CreateText(@"C:\File.Html")) { streamWriter.WriteLine(TextBox2.Text); } The issue I am facing is that when I open File.Html, all characters are displayed on a sin ...

c#asp.nethtml

Increase the height of a div dynamically in HTML during program execution

Within my datagrid, there exists an expandable/collapsible section above the content (see Picture 1 https://i.sstatic.net/N68Rl.png). Upon expanding the content, a scroll bar appears within the datagrid element to display the data (see Picture 2 https://i. ...

htmlcssasp.net