Reputation: 289
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
<!-- 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
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;
}
Upvotes: 0
Views: 51