Create a Discussion

Image width 100% not relative to table cell in Outlook?

Bjørn Lau Jørgensen posted 2016-03-17 12:09:43

Hi there,

I am about to make 15 different modules, but i am already struggeling on the first one. The code works perfectly in all clients except in gte mso 9. It seems like my image width on 100% which I expected to fill out 100% of the current table cell, and not the 100% of the image width (or whatever happens).

Maybe it's also because the two tabels are stacked under each other in Outlook, which it's only ment to on mobile devices.

I simplay can't figure out how to solve this. Any good suggestions? :)

Thanks you!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">

    @media only screen and (max-width: 620px) {
        /* mobile-specific CSS styles go here */
        table, td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        table[class=wrapper] {
            width: 100% !important;
        }

        table[class=onMobile100] {
            width: 100% !important;
        }

        td[class=onMobile50] {
            width: 50% !important;
        }

    }

    /* regular CSS styles go here */
    table.wrapper {
        width: 620px;
    }

</style>

</head>

<body>

<table class="onMobile100" width="620px" border="0" align="center">
    <tr>
        <td>
            <table class="onMobile100" align="left" width="305">
                <tr>
                  <td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
                  <td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
                </tr>
            </table>

            <table class="onMobile100" align="left" width="305">
                <tr>
                  <td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
                  <td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

https://litmus.com/builder/fc5b426

Charlie Marshall replied 2016-03-17 14:08:31

Is this what you are trying to achieve?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">

    @media only screen and (max-width: 620px) {
        /* mobile-specific CSS styles go here */
        table, td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        table[class=wrapper] {
            width: 100% !important;
        }

        table[class=onMobile100] {
            width: 100% !important;
        }

        td[class=onMobile50] {
            width: 50% !important;
        }

    }

    /* regular CSS styles go here */
    table.wrapper {
        width: 620px;
    }


</style>

</head>

<body>

<table class="onMobile100" width="620px" border="0" align="center">
    <tr>
        <td>
            <!--[if (gte mso 9)|(IE)]>
            <table border="0" cellspacing="0" cellpadding="0" width="620" ><tr><td valign="top">
            <![endif]-->
              <!-- left column-->
            <table class="onMobile100" align="left" width="310">
                <tr>
                  <td class="onMobile50"><img alt="product" width="155" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%; max-width: 155px;" /></td>
                  <td class="onMobile50"><img alt="product" width="155" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" class="high-quality-image" style="width: 100%; max-width: 155px;" ></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td></tr><tr>
          <td valign="top"><![endif]-->
          <!-- RIGHTCOLUMN -->
            <table class="onMobile100" align="left" width="310">
                <tr>
                  <td class="onMobile50"><img alt="product" width="155" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" class="high-quality-image" style="width: 100%; max-width: 155px;"></td>
                  <td class="onMobile50"><img alt="product" width="155" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" class="high-quality-image" style="width: 100%; max-width: 155px;"></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td>
            </tr></table><![endif]-->
        </td>
    </tr>
</table>

</body>
</html>

Reply to Charlie Marshall

Bjørn Lau Jørgensen replied 2016-03-17 20:44:14

Hi Charlie,

Thanks! Very interesting! Almost this yes, just on desktop i wan't the images side by side all 4, on a row.

Bjørn Lau Jørgensen replied 2016-03-18 07:59:27

This code here is very very close. Just need to prevent the tables from stacking under each other in outlook.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">

    @media only screen and (max-width: 620px) {
        /* mobile-specific CSS styles go here */
        table, td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        table[class=wrapper] {
            width: 100% !important;
        }

        table[class=onMobile100] {
            width: 100% !important;
        }

        td[class=onMobile50] {
            width: 50% !important;
        }

    }

    /* regular CSS styles go here */
    table.wrapper {
        width: 620px;
    }


</style>

</head>

<body>

<table class="onMobile100" width="620px" border="0" align="center">
    <tr>
        <td>
            <!--[if (gte mso 9)|(IE)]>
            <table border="0" cellspacing="0" cellpadding="0" width="620" ><tr><td valign="top" align="left">
            <![endif]-->
              <!-- left column-->
            <table class="onMobile100" align="left" width="300">
                <tr>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;" /></td>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;" ></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td></tr><tr>
          <td valign="top" align="left"><![endif]-->
          <!-- RIGHTCOLUMN -->
            <table class="onMobile100" align="left" width="300">
                <tr>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;"></td>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;"></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td>
            </tr></table><![endif]-->
        </td>
    </tr>
</table>

</body>
</html>

Bjørn Lau Jørgensen replied 2016-03-18 08:42:40

Problem solved! Thanks.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style type="text/css">

    @media only screen and (max-width: 620px) {
        /* mobile-specific CSS styles go here */
        table, td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        table[class=wrapper] {
            width: 100% !important;
        }

        table[class=onMobile100] {
            width: 100% !important;
        }

        td[class=onMobile50] {
            width: 50% !important;
        }

    }

    /* regular CSS styles go here */
    table.wrapper {
        width: 620px;
    }

    .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }


</style>

</head>

<body>

<table class="onMobile100" width="620px" border="0" align="center">
    <tr>
        <td>
            <!--[if (gte mso 9)|(IE)]>
            <table border="0" cellspacing="0" cellpadding="0" width="620"><tr><td valign="top" align="left" class="msoFix">
            <![endif]-->

            <!-- LEFT COLUMN-->
            <table class="onMobile100" align="left" width="305">
                <tr>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;" /></td>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;" ></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td>
          <td valign="top" align="right"><![endif]-->

          <!-- RIGHTCOLUMN -->
            <table class="onMobile100" align="left" width="305">
                <tr>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;"></td>
                  <td class="onMobile50"><img alt="product" width="150" src="http://northdigital.dk/ccnewsletter/556600_1.jpg" style="width: 100%;"></td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]></td>
            </tr></table><![endif]-->
        </td>
    </tr>
</table>

</body>
</html>

Reply to Bjørn Lau Jørgensen

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Image width 100% not relative to table cell in Outlook?

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password