Mjml: Outlook 2000 - 2003 Image Alignment

[NickScola]

Has anyone noticed images are not being centered align, or they are being pushed to the right?

http://imgur.com/a/aFRxZ

[forethoughtde]

Can you post your code here so that we can see what is wrong?

[NickScola]

<mj-section background-color="#ffffff" padding-bottom="0px"><mj-column><mj-image padding="15px 0 0" width="150" src="https://static.cdn.responsys.net/i5/responsysimages/trnkclb/contentlibrary/brands/images/TCNordstromLogo.png" alt="Trunk Club Nordstrom Logo"></mj-image></mj-column></mj-section>

[popzelife]

Actually the image is not center aligned with Outlook 2000 - 2003. Investigating the output HTML there is a style="width:100%" that seems to break the alignment. Just deleting it fixed the problem.

<td style="width:150px;"><img alt="Trunk Club Nordstrom Logo" title="" height="auto" 
src="https://static.cdn.responsys.net/i5/responsysimages/trnkclb/contentlibrary/brands/images/TCNordstromLogo.png"
style="border:none;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
width="150"></td>

[popzelife]

Although I can't reproduce the right alignment problem.

[dalefish]

Early outlooks don't like images that are too big for the space.

Try creating a smaller version of the logo and see if it helps.

Hard to know if that is the problem without seeing an example but it's a
start.

On 4 Aug 2017 14:40, "Quentin Frémeaux" [e-mail] wrote:

Although I can't reproduce the right alignment problem.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/758#issuecomment-320238483, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AKxLOEJG0ZQULr9_WklQ5-y_IYYM2brDks5sUxFDgaJpZM4OkSbe
.

[iRyusa]

Hi @NickScola

Can you provide the full template so we can investigate ?

[hkolsen]

Having the same issue over here, images are not aligning center in Outlook 2000/2002/2003. Here is the MJML code:

<mjml> <mj-body> <mj-container> <mj-section padding="0"> <mj-column> <mj-image href="https://tacobell.com" align="center" alt="TACO BELL" title="Taco Bell Home" width="320" src="https://eroi-s3.s3.amazonaws.com/emailassets/clients/tacobell/2017/transact/global/tacobell_header-logo.jpg" /> </mj-column> </mj-section> </mj-container> </mj-body> </mjml>

Here is the Litmus Builder so you can see the compiled version and the result. Any ideas? Just removing the style="width:100%" didn't seem to do the trick.

[iRyusa]

(Just post the slack reply here for other people checking the issue)

You can either replace width per max-width, but we don't really know if there's some downside on this solution : https://mjml.io/try-it-live/S18tEFvDZ

Or just keep the img at the natural size equal to his container (here 320 instead of 640) it's an old bug with outlook allocating more space than it should to display the img you can read more here https://mjml.io/try-it-live/S18tEFvDZ

Same thing for you @NickScola

I can close this issue now :) feel free to reopen if needed

[rogierslag]

Or just keep the img at the natural size equal to his container (here 320 instead of 640) it's an old bug with outlook allocating more space than it should to display the img you can read more here https://mjml.io/try-it-live/S18tEFvDZ

For documentation purposes it might be useful to include the correct link somewhere (the above one is off)

[iRyusa]

Oops https://github.com/mjmlio/mjml/issues/618#issuecomment-289467937

[ParallelUniv3rse]

If anyone stumbles upon this an easy fix that worked for me was to include this into the mj-head
<mj-style inline="inline"> img { max-width: 100%; } </mj-style>