CODEWITHSUNDEEP
htmlcssemail
Aravind
Aravind

Reputation: 2198

Css content(Images) added in a mail Html file is not displaying images

I have some div classes for mail in Css of the mail. But when i open the mail in outlook or in gmail i am not able to view the images. But when i open the mail in browser it displays the images fine...

Attached the Email's content

    <!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dt--><!--CTYPE html PUBLIC "-//W3C//DTD XHTML 
1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

    <style type="text/css">
.logo_print {   
    background-image:url("http://www.websitename.com//en-ca/images/logo_print.jpg");
    width:105px;height:79px; } .icon_shipped {  
    background:url("http://www.websitename.com//en-ca/images/icon_shipped.jpg");widt
    h:14px;height:14px; } .icon_not_shipped {   
    background:url("http://www.websitename.com//en-ca/images/icon_not_shipped.jpg");
    width:16px;height:15px; } .the_email_top 
    {width:560px;height:93px;background-image:url("http://www.websitename.com//en-ca
    /images/top.jpg")}
    </style>

    <title></title>
</head>

<body>
    <table border="0" cellspacing="0" cellpadding="0" align="center">
        <tbody>
            <tr valign="top">
                <td colspan="3">
                    <div class="the_email_top">
                </td>
            </tr>

            <tr valign="top">
                <td width="10">&nbsp;</td>

                <td width="540">
                    <div style="width: 10px; height: 12px; overflow: hidden;"></div>

                    <h1 style="margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #212121; font-weight: bold;">Password Reset</h1>

                    <div style="width: 10px; height: 16px; overflow: hidden;"></div>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Dear Customer,</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">To reset your password, either click the link below or copy and paste it into your browser.</span><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>
                    <a href="http://www.websitename.com/en-ca/useraccount/resetPassword?NirvanaToken=01d4lKN1%2BTS5g94oEHejeR3IBovtHrwHnU6sfmjSCu5LMpnSjN5c6xX5s8rrOQ0p%0D%0A">Use this link.</a><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">&nbsp;</span><br>
                    <span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Please do not reply to this email.</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Sincerely,</span></p>

                    <p><span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555555;">Your Web Site Hosting support team</span></p>

                    <div style="width: 10px; height: 60px; overflow: hidden;"></div>
                </td>

                <td width="10">&nbsp;</td>
            </tr>

            <tr valign="top">
                <td colspan="3" bgcolor="#F2F2F2">
                    <div style="width: 10px; height: 10px; overflow: hidden;"></div><span style="margin-left: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999999;">&copy; 2011 Deluxe Enterprise Operations. All Rights Reserved.</span>

                    <div style="width: 10px; height: 55px; overflow: hidden;"></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Upvotes: 1

Views: 622

Answers (3)

RDL
RDL

Reputation: 7961

In addition to Xavier message you need to be using absolute urls (full paths). Ie:

http://www.example.com/[image].[ext]

If you just use /[image].[ext] it won't work in email clients and just using [image].[ext] won't work unless it's embedded in the email itself.

I would not recommend embedding images into the email as it makes for a bigger email people need to download and takes up more room.

Here is a handy guide to css support in emails

It is b/c the programs you are using to view the email doesn't support css background images.

Upvotes: 2

stephenmurdoch
stephenmurdoch

Reputation: 34623

Forgive me if i've got this wrong, but I've always been under the impression that email clients tend to chop-out everything that appears outside the body tag.

You do not have a body tag and furthermore, even if you did, your CSS appears in your head tag. This is outside the body tag.

I would add a body tag. And then I would put the CSS inside the body tag.

Sorry if i've got the wrong idea here, maybe things have changed recently

Upvotes: 0

Xavier Holt
Xavier Holt

Reputation: 14619

Most e-mail programs will block images by default - you'll probably see a "Click here to enable images from XXX domain" message when you're testing your e-mail in actual clients (they do it to prevent tracking, I guess - not really sure why it's so common). Browsers, however, have no such qualms, so your images will show up just fine.

If you want your images to show up in e-mail clients, you're just going to have to hope your users will allow them. Maybe they will, but don't count on it - you should build your e-mail so that it looks fine even without images.

Hope this helps (and sorry for the non-answer, but that's just how e-mail clients are)!

Upvotes: 2

Related Questions