OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Images are showing up as blank in Web Outlook, rendering properly among other apps, including desktop Outlook

  • Thread starter Thread starter Paul
  • Start date Start date
P

Paul

Guest
My email is showing images correctly in all mailboxes and platforms except Web (browser) Outlook, where they are simply rendered blank. The "image" is still clickable, and takes up space on the email, but the image is not there, just white.

I checked for any display:none attributes, double checked width/max width and that the sizes all aligned properly within the tables. (It is email development so it is using tables for everything). Here is some relevant affected code

Code:
<!-- MODULE BEGINS // -->
<tr>
 <td align="center" valign="top"><!-- CENTERING TABLE // -->
  <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
   <tbody>
    <tr>
     <td align="center" valign="top">

       <!-- FLEXIBLE CONTAINER // -->
        <table class="flexibleContainer" style="width: 640px;" border="0" cellspacing="0" cellpadding="0">
           <tbody>
              <tr>
                 <td class="flexibleContainerCellFull" width="640" align="center"  valign="top">

                    <!-- CONTENT TABLE // --> 
                    <!-- The table cell imageContent has padding applied to the bottom as part of the framework, ensuring images space correctly in Android Gmail.-->
                   <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                         <tr>
                            <td class="imageContent" style="padding-top: 20px; padding-bottom:10px;" valign="top">
                            <a href="LINK">
                                <img class="flexibleImage" style="max-width: 640px;"src="http://support.amrevmuseum.org/images/content/pagebuilder/Untitled_design__31__1__1_.png" alt=""width="640" />
                           </a>
                        </td>
                     </tr>
                    </tbody>
                    </table>
                   <!-- // CONTENT TABLE -->
                   
               </td>
              </tr>
             </tbody>
            </table>
            <!-- // FLEXIBLE CONTAINER -->

          </td>
         </tr>
        </tbody>
       </table>
      <!-- // CENTERING TABLE -->
      </td>
      </tr>

And here is the relevant CSS

Code:
 table[id="emailBody"],
        table[class="flexibleContainer"] {
            width: 100% !important;
        }
    
.flexibleContainerCellFull {
        padding-top: 0px;
        padding-Right: 0px;
        padding-Left: 0px;
    }

.imageContent {
        padding-bottom: 15px;
    }

.flexibleImage {
        height: auto;
    }
<p>My email is showing images correctly in all mailboxes and platforms except Web (browser) Outlook, where they are simply rendered blank. The "image" is still clickable, and takes up space on the email, but the image is not there, just white.</p>
<p>I checked for any display:none attributes, double checked width/max width and that the sizes all aligned properly within the tables. (It is email development so it is using tables for everything). Here is some relevant affected code</p>
<pre><code><!-- MODULE BEGINS // -->
<tr>
<td align="center" valign="top"><!-- CENTERING TABLE // -->
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">

<!-- FLEXIBLE CONTAINER // -->
<table class="flexibleContainer" style="width: 640px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="flexibleContainerCellFull" width="640" align="center" valign="top">

<!-- CONTENT TABLE // -->
<!-- The table cell imageContent has padding applied to the bottom as part of the framework, ensuring images space correctly in Android Gmail.-->
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="imageContent" style="padding-top: 20px; padding-bottom:10px;" valign="top">
<a href="LINK">
<img class="flexibleImage" style="max-width: 640px;"src="http://support.amrevmuseum.org/images/content/pagebuilder/Untitled_design__31__1__1_.png" alt=""width="640" />
</a>
</td>
</tr>
</tbody>
</table>
<!-- // CONTENT TABLE -->

</td>
</tr>
</tbody>
</table>
<!-- // FLEXIBLE CONTAINER -->

</td>
</tr>
</tbody>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>

</code></pre>
<p>And here is the relevant CSS</p>
<pre><code> table[id="emailBody"],
table[class="flexibleContainer"] {
width: 100% !important;
}

.flexibleContainerCellFull {
padding-top: 0px;
padding-Right: 0px;
padding-Left: 0px;
}

.imageContent {
padding-bottom: 15px;
}

.flexibleImage {
height: auto;
}

</code></pre>
Continue reading...
 

Latest posts

Top