Outlook 2010 boxes width issue

[Bellegar]

This code

    <m-wrap padding="5px">
    <m-boxes valign="middle">
        <m-box width="150">
         <m-wrap padding="5">
             <m-img src="cid:google-play-badge.png" href="***" alt="" height="41">
             </m-img>
         </m-wrap>
        </m-box>
        <m-box width="150">
         <m-wrap padding="5">
             <m-img src="cid:download-as-rustore.png" href="***" alt="" height="41">
             </m-img>
         </m-wrap>
        </m-box>
        <m-box width="150">
         <m-wrap padding="5">
             <m-img src="cid:download-as-apk.png" href="***" alt="" height="41">
             </m-img>
         </m-wrap>
        </m-box>
    </m-boxes>
    </m-wrap>

Produces

<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr><td align="center" style="padding: 5px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="middle" style="font-size: 0px;">
    <div style="display: inline-block; vertical-align: middle; width: 150px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
        <tr><td align="center" valign="top" class="outf14" style="font-size: large;">
            <div>
                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr><td align="center" style="padding: 5px;">
                    <a href="***" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;"><img src="cid:google-play-badge.png" height="41" alt="" border="0" style="display: block;"></a>
                </td></tr>
                </table>
            </div>
        </td></tr>
        </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    <td valign="middle" width="150" style="width: 150px">
    <![endif]-->
    <div style="display: inline-block; vertical-align: middle; width: 150px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
        <tr><td align="center" valign="top" class="outf14" style="font-size: large;">
            <div>
                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr><td align="center" style="padding: 5px;">
                    <a href="***" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;"><img src="cid:download-as-rustore.png" height="41" alt="" border="0" style="display: block;"></a>
                </td></tr>
                </table>
            </div>
        </td></tr>
        </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    <td valign="middle" width="150" style="width: 150px">
    <![endif]-->
    <div style="display: inline-block; vertical-align: middle; width: 150px;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
        <tr><td align="center" valign="top" class="outf14" style="font-size: large;">
            <div>
                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr><td align="center" style="padding: 5px;">
                    <a href="***" target="_blank" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000;"><img src="cid:download-as-apk.png" height="41" alt="" border="0" style="display: block;"></a>
                </td></tr>
                </table>
            </div>
        </td></tr>
        </table>
    </div>
</td></tr>
</table>
</td></tr>
</table>

On Outlook 2010 it looks like this:

For (gte mso 9)|(IE) there is 3 \<td> blocks, where 2nd and 3rd \<td> have width="150" attribute, but first \<td>, which is not wrapped in [id mso] comment, do not contain width attribute. If i manually add width="150" to first \<td>, <tr><td align="center" width="150" valign="middle" style="font-size: 0px;"> it started to look more expected

[Bellegar]

Also if i did not set width to boxes and height to img-s, email width on Outlook goes out of range (my width for top m-wrap is 700px), boxes with images do not wrap to new line, so other m-boxes with align="center" with or without width attributes aligns incorrectly. Incorrectly left-aligned boxes with qr-image is set to 350 + 280 width of boxes. Incorreclty rigth-aligned boxes with buttons has no width attribute. (Also red button in m-boxes with coloerd and img-ed background wapper is not rounded only in Outlook, and not fully clickable)

[pixcraft-io]

Hello. You are describing several different situations and issues.

Regarding the width of m-boxes in Outlook: first of all, the width attribute is mandatory for m-img. You can find more information about it here: https://github.com/ampier-io/ampier-framework/wiki#module_m-img

It was assumed that the "m-box" blockes would take up 100% of the width of m-boxes, which is causing a display problem because 150+150+150 only adds up to 450px, while the total width should be 700px. The parent table has a width of 100%. Since the width is explicitly defined for the second and third cells, we are seeing an increase in the width of the first cell. This can be resolved at the framework level.

[pixcraft-io]

Regarding the second issue: The width for m-img needs to be explicitly specified. For m-box, the default width is 300px. You can find more information about it here: https://github.com/ampier-io/ampier-framework/wiki#module_m-box

M-button in Outlook probably doesn't have VML framing because it's nested within a block with a background image. To ensure correct rendering, it is inserted as a table cell. Therefore, rounded corners may not work, and it may not be fully clickable. To make it fully clickable, you may have to remove the background image.

For a more detailed analysis, could you provide the complete code for the second issue?