Email in HTML format: content rendering poorly in Outlook

Below is the code I am using to display text with an image.

<table width="220" align="right" style="">
         <tr>
         <td>
         <table align="left" width="100" style="padding: 0; Margin: 0;  Margin-top:15px;">
<tr>

<td align="right" style="">
<span style="color:#000000; font-size:14px; ">Powered By</span>   
</td>

</tr>
</table>

<table align="left" width="40"  style="padding: 0; Margin: 0; ">
<tr>

<td align="center">
<a href="http://facebook.com" style="color:#808080;font-family:Helvetica;font-size:11px;line-height:20.7999992370605px;word-wrap:break-word;font-weight:normal;text-decoration:underline" target="_blank">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="40" height="40" style="vertical-align:middle;">
</a>
</td>

</tr>
</table>

<table align="left" width="50" style=" Margin-top:15px; ">
<tr>

<td align="right" style="">
<span style="color:#000000; font-size:14px;">DUMMY </span>      
</td>

</tr>
</table>

</td>
</tr>

</table>

However, when viewed in Outlook, the text dummy goes to the next line.

What am I missing?
https://i.sstatic.net/RgU3f.png

PS: I am unable to utilize inline-block, position, or div.

htmlcssoutlookhtml-table

Answer №1

Give this code a shot.

<table align="right" style="margin-top:15px; margin-right: 30px;">
        <tr>
            <td align="right" style="width: 100px; padding: 0; margin: 0;">
                <span style="color:#000000; font-size:14px; ">Powered By</span>             
            </td>                  
            <td align="center" style="width:40px; padding: 0; margin: 0;">
                <a href="http://facebook.com" style="color:#808080;font-family:Helvetica;font-size:11px;line-height:20.7999992370605px;word-wrap:break-word;font-weight:normal;text-decoration:underline" target="_blank">
                    <img src="http://www.hubilo.in/images_for_links/facebook.png" width="40" height="40" style="vertical-align:middle;">
                </a>
            </td>
            <td align="right" style="width: 50px; padding: 0; margin: 0;">
                <span style="color:#000000; font-size:14px;">DUMMY </span>                  
            </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 to display umlauts (åäö) using Verdana font in Internet Explorer versions 8 and 9

Encountering a strange issue on certain pages where the rendering of umlauts (åäö) appears incorrect in IE8 and IE9 at times. The encoding is utf-8 (and most of the site functions correctly, so I know it's correct). I have attempted to isolate the ...

htmlinternet-explorer-8fontsinternet-explorer-9

Empty array returned when using wrapper.classes() with Vue-test-utils and CSS modules

Recently I started using Vue Test Utils along with CSS Modules. My Vue component is all set up with CSS Modules and it functions perfectly in the app as well as in Storybook. Take my BasicButton for example: <template> <button :class="[ ...

cssvue.jsjestjsvue-test-utilscss-modules

"Encountering an issue with the live preview feature in Br

Currently, I am working on a project offline and trying to make Brackets' live preview feature work smoothly. It has proven to be quite convenient for my tasks. While opening my project files using the "open file" option in Brackets, I encountered an ...

htmlcssadobe-brackets

Importing for the purpose of minimizing and combining CSS files is not functioning as expected in conjunction with the h5bp

After configuring my main.css to import two style sheets using the @import rule, I ran into an issue. The H5BP build script minified and concatenated the main.css, but the imported files were missing. I double-checked the build script's config to ens ...

cssbuildhtml5boilerplate

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...

htmlcssweb

Tips for organizing CSS styles into common and unique statements

Is there a way to apply the same background style but different font styles to two elements without duplicating the style statement in the header part? ...

css

Editing input within a Bootstrap 4 popover causes it to lose focus

I am using Bootstrap 4 along with the Bootstrap colorpicker to implement a colorpicker within a popup that includes an input field for setting the color code. However, I am facing an issue where the input field (#color-value) seems uneditable when the popo ...

javascripthtmlbootstrap-4color-picker

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

cssnext.jstailwind-cssshadcnui

Navigating the process of returning a list from an AJAX method to a view through a controller in ASP.NET MVC

I need to retrieve a list from my controller and pass it to the view. Currently, I have the following script: function fetchNames(_id, _name) { $.ajax({ type: 'Post', url: 'GetNames/', data: { id: _id, name: _name}, su ...

javascripthtml.netasp.net-mvc

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

Moving a file from one webpage to another

My current project involves creating a multi-page form consisting of 3 pages. The first page will collect user input, including an uploaded file. The second page will display a summary of the entered data for confirmation. The third page will handle submit ...

phphtmlcakephppost

Swap out a paragraph with a city name fetched from a JSON file

While working on a weather app, I encountered an issue. The app needs to automatically detect the user's location and display the appropriate temperature along with the city name. I have been trying to fetch data from JSON to replace the placeholder t ...

javascriptjqueryhtmljson

Erase the dynamically loaded page using ajax and conceal the div

Currently, I am utilizing the .on() method with jQuery to display a specific div, and also using .load() to fetch a particular div from a web page hosted on my server. My query is how can I close this div when clicking outside of it, along with removing i ...

javascriptjquerycssajax

Tips for aligning a SPAN in a navbar to the center

When attempting to center the middle span, the right span containing buttons shifts downward. I am trying to create a navigation bar with one link on the left, three links in the center, and two buttons on the right. While floating the elements on the left ...

htmlcss

Tips for Positioning a Page Layout in the Center Using HTML and CSS

I'm a beginner in HTML and CSS and I'm trying to create a simple webpage layout from scratch. I want all the elements of the page (nav, header, section, footer, etc.) to be centered while still keeping the nav bar on the left side. I've set ...

htmlcss

Tips for positioning footer text to the left and right, similar to Google's style

Explore www.google.com for inspiration. You will notice a footer containing links to Advertising, Business, and About on the left side, and Privacy, Settings, Terms, etc. on the right side at the bottom of the page. I am an aspiring developer attempting ...

htmlcss

Differences between Animation Easing in iOS and CSS3 Cubic Bezier Functions

I am currently working on an iOS app and I am trying to improve the animations within it. Having a lot of experience with CSS3 animation and transitions, I want to be able to define my animations in iOS with the same precision that is possible with CSS3 ( ...

ioscsscore-animationcss-transitionsbezier

What is the best way to incorporate a button that can toggle the visibility of the sidebar on my post page?

Check out this post of mine I noticed a button on someone's page that could hide their sidebar and expand it again when clicked. How can I implement this feature? Is it a simple task? ...

javascripthtmljekyll

What is the best method to shift an element to the top by a fraction of its height, namely -100%?

I am facing an issue with an element where I set top: -100%. My requirement is to translate top: -100% to top: -{height-of-the-element}. Unfortunately, instead of getting top: -{height-of-the-element}, I am getting top: -{height-of-another-element-wrapping ...

htmlcsscss-positionabsolute

What causes ngb-tabset to reset to the first tab upon being hidden and then shown again?

I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...

htmlcssangularng-bootstrap