CODEWITHSUNDEEP
htmloutlookoutlook-2010
RunLoop
RunLoop

Reputation: 20376

Linked image in HTML does not download in Outlook 2010

When I include the following HTML in an email, the image is downloaded automatically by Outlook:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head><body><div><p><br /></p></div><div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px"><img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>John</b></p><br /><br /><br /><br /><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>XYZ Company</b></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></body></html>

However, the same image in the following HTML is not automatically downloaded by Outlook:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
        div, p {
            margin:0;
            padding:0;
            font-family: Helvetica;
            font-size:14px;
            color:#000;
            font-weight:bold;
        }
        div.box {
            padding:15px;
            width:272px;
            height:155px;
            border:2px solid #000;
            background-color:rgb(255,232,0);
        }
        div.box div.inner {
            height:100%;
            background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
        }
        p.name {
            margin-bottom:65px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <p class="name">John</p>
            <p>XYZ Company</p>
        </div>
    </div>
</body>
</html>

Why would the image be downloaded in the first example but not the second please?

Upvotes: 0

Views: 720

Answers (3)

Greg Bulmash
Greg Bulmash

Reputation: 1957

Outlook 2007 and 2010 do not support background images because your web browser in those apps is not IE. It's Microsoft Word. You have to use VML to set up background images (I know, I've had to do this).

Here's a page about the VML hack.

http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/

You can also subscribe to a newsletter at MSNBC and see how it's done in their newsletter headers (my handiwork).

Upvotes: 0

hradac
hradac

Reputation: 2491

That's because creating HTML emails suck. Outlook, since 2007 I believe, switched from using Internet Explorer's renderer to using a Word based HTML renderer. This makes CSS support extremely limited. Your best hope at making an HTML email without losing your mind is to use tables to structure your content and use inline styles right on the elements. Yes, to reach the widest possible audience with HTML emails you have to code like it's 1997.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

Email clients do not provide full CSS support. These tables show what a nightmare it is... According to them, Outlook 2000-2003 did support background-image, but it was dropped in Outlook 2007 and 2010.

Upvotes: 2

Related Questions