Search code examples
htmlcssimageoutlookhtml-email

Email template not keeping image inline in Outlook

Trying to get the icons to appear to the right of the header text. Cannot use <li>. My solution works everywhere except in the Outlook email client. Any help is appreciated.

Desired Output: enter image description here

Actual Output in Outlook: enter image description here

Code:

<tr>
    <td class="padding content"
        style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">

        <img src="https://i.ibb.co/MCXhwJB/authenticator-app-icon-large.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;padding-top:20px;display:inline;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Multi-Factor Authenticator (MFA)</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">The two-factor Authenticator application for Microsoft applications (Outlook, Teams, Word, etc.) will become required when working off-site to comply with our security policies.</p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;"> The rollout will be <strong>staged throughout several weeks, going department by department.</strong> You will receive a reminder email <strong>3-4 days before</strong> the MFA application becomes required for your account.</p> 
        <p style="font-size:18px;line-height: 23px;min-width:600px;">See <strong>instructions below</strong> for install and setup instructions for the MFA. If you already have the MFA app install and successfully setup <strong>no further steps are required.</strong></p>
        
        <img src="https://i.ibb.co/64HcKjs/rotation-lock.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;display:inline;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Self-Service Password Reset/Recovery</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">With Office 365, it is now possible to register your Halton Healthcare with a personal email address to allow you to <strong>result or recover your Halton email account on your own</strong> without having to call or email service desk for assistance. See <strong>information below for registration instructions</strong>.</p>
       
        <img src="https://i.ibb.co/kxsY2M1/defender.jpg" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:20px;">
        <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Safe Links</strong></p>
        <p style="font-size:18px;line-height: 23px;min-width:600px;">Thanks to Office 365 security enhancements, we are now able to deploy Safe Links. External links within emails will now be automatically checked against known malicious links and prevent a staff member from clicking into it. For more information <strong>see below</strong>.</p>
        
    </td>
</tr>
Solution

  • Due to my comment above, the safest way is using nested table. It's just HTML markup, add additional styles yourself (border-collapse, widhts, etc.)

    <tr>
    <td class="padding content"
        style="padding-top:0;padding-right:25px;padding-bottom:20px;padding-left:25px;width:100%;text-align:left;font-size:15px;">

        <table>
            <tr>
                <td width="80">
                    <img src="https://i.ibb.co/MCXhwJB/authenticator-app-icon-large.png" width="50" height="50" alt=""style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px;padding-top:20px;display:inline;">
                </td>
                <td width="...">
                    <p style="font-size:18px;line-height: 23px;min-width:600px; display: inline;"><strong>Multi-Factor Authenticator (MFA)</strong></p>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <p style="font-size:18px;line-height: 23px;min-width:600px;">The two-factor Authenticator application for Microsoft applications (Outlook, Teams, Word, etc.) will become required when working off-site to comply with our security policies.</p>
                    <p style="font-size:18px;line-height: 23px;min-width:600px;"> The rollout will be <strong>staged throughout several weeks, going department by department.</strong> You will receive a reminder email <strong>3-4 days before</strong> the MFA application becomes required for your account.</p> 
                    <p style="font-size:18px;line-height: 23px;min-width:600px;">See <strong>instructions below</strong> for install and setup instructions for the MFA. If you already have the MFA app install and successfully setup <strong>no further steps are required.</strong></p>
                </td>
            </tr>
            ...
        </table>
    ...