Trying to hide images in html email - not working in Outlook 2010

Question

I'm building device-responsive emails for mobile. As part of this I want some images that appear on desktop/webmail to be hidden on mobile and vice versa.

I've got it working on all web clients, and mobile devices that I've tested, but Outlook shows all images in the file.

I've tried combinations of display:none; , visibility; hidden and width="0" on images, tds, tables and tried with divs as well.

I know there's a workaround with using background images instead, but it's not ideal as some of the images are acting as buttons and need links behind them.

Would appreciate any help,

Thanks.

Sharon

Answer 1

Thanks for the replies, I've now managed to fix it. I think what Matt was saying was right; My problem WAS to do with inline styles.

Answer 2

I had the same issue whereby I wanted two different size images and wanted them both to be clickable as a link.

My media query is only targeting mobile devices, so I can define the height of the containing table cell and ensure that the link is a set block height.

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {      
td[class="image-class"], 
a[class="image-link-class"]{
height:165px!important; 
display: block; !important};
img[class="desktop-content"]{
display: none !important; 
height:0 !important; 
min-height: 0 !important; 
max-height: 0 !important; width:0 !important; overflow: hidden !important;
}

The image then has a class which bazookas's everything into 0 to ensure it really is hidden. For desktop based email clients the background image of the table cell is never seen and is then covered by the inline image

<td height="473" background="image-mobile.jpg" class="image-class"><a href="#" class="image-link-class"><img src="image-desktop.jpg" width="318" height="473" border="0" alt="" style="display:block" class="desktop-content"></a></td>