www.webdeveloper.com
Results 1 to 2 of 2

Thread: Email Format incorrect in Mac Built Outlook

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    1

    Email Format incorrect in Mac Built Outlook

    I have encountered a problem with formatting of HTML emails sent by the website I am developing. In all web-based emails, all elements are correctly placed, but upon opening the email in the Mail app on iPhone, or in Outlook 2011 on Mac, elements are misplaced or even missing altogether. Does anyone have an idea for what may be my problem?

    Link to screenshot of email as opened in Outlook 2011 Mac
    http://serkel.net/uploads/Screenshot.png

    Link to same email as opened in Outlook 2010 Windows
    http://serkel.net/uploads/Correct_Screenshot.png

    Please note the position of the "Description Here" in both screenshots. Also note the omission of the company name (Floor Mat Enterprises) from the first screenshot.

    Basically, my question is how do I make the first screenshot, the one opened on an Apple Product, look like the second screenshot, the one opened with a PC?

    Below is the errant code.

    HTML Code:
    Received: (qmail 11392 invoked by uid 30297); 16 Feb 2013 14:13:31 -0000
    Received: from unknown (HELO p3plibsmtp01-04.prod.phx3.secureserver.net) ([10.6.12.175])
              (envelope-sender <mailto.xxx@sss.sss>)
              by p3plsmtp15-04.prod.phx3.secureserver.net (qmail-1.03) with SMTP
              for <xxx@xxx.xxx>; 16 Feb 2013 14:13:31 -0000
    Received: from mail-qa0-f49.google.com ([209.85.216.49])
    	by p3plibsmtp01-04.prod.phx3.secureserver.net with bizsmtp
    	id 12D81l01C14Xaop012D8vz; Sat, 16 Feb 2013 07:13:09 -0700
    X-Authority-Analysis: v=2.0 cv=KNaE+i5o c=1 sm=1
     a=SWv5oUGDhIUJ2XzXz06yQg==:17 a=VCTOICiLofMA:10 a=nDghuxUhq_wA:10
     a=2RvudqGy-7YA:10 a=d3ZwFMNkyaEA:10 a=8nJEP1OIZ-IA:10 a=pGLkceISAAAA:8
     a=Bz5AVga0uBQA:10 a=ahjtIkjJAAAA:8 a=8XHUl-BM4GN2dZbxzXMA:9 a=wPNLvfGTeEIA:10
     a=-Zq7gQ0F2KwA:10 a=XUlppX43fNIA:10 a=CYi84dTwka4A:10 a=oeqf2gO4N9UA:10
     a=5c11UbA6BzkA:10 a=FiVdJbEhosYA:10 a=9F97e7rTYkwA:10 a=qiWi7Edwir4A:10
     a=NWVoK91CQyQA:10 a=zm3gvGDjZvOlw20_:21 a=CApk6KxTCkM1rIyOMRcVCg==:117
    Received: by mail-qa0-f49.google.com with SMTP id o13so697466qaj.15
            for <xxx@xxx.xxx>; Sat, 16 Feb 2013 06:13:08 -0800 (PST)
    DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed;
            d=gmail.com; s=20120113;
            h=x-received:date:to:from:reply-to:subject:message-id:x-priority
             :x-mailer:mime-version:content-transfer-encoding:content-type;
            bh=gKgzpsY9Awum/aHJVTjplwpabImHA8kbvE0PdifWDnQ=;
            b=OXsw2EcrCeUgX9MKVtWVAGuq5vLykuRF1NMt5ZNyGr3fPYSiwmwMC1rixKwveCguqs
             LS9w4LjEnZpKRhm+BqEfEeUbrER+SIgLt1hN6+lHzcRHe/S/0IfH/agGIQrGoPyo333N
             6M4qcz24Sgal/AKg2ijPAohTcaZIGvdTkbvE3HSKjbsqJNq8iIjrde5ED0XA8Giwy9PL
             z9/dqrTKcBzHX6WiYhw4JQAgA9YFt6n4KJ7ofGqQL5rijqoss6e4yOO4vOyEPPJvR6x5
             2JE0VQjxLRG4q7JBXElRCOOl11dq3bQqj8/Zedt9rmXLMwZCVMZtaCaNlXdPsuGFe8Pj
             5ocQ==
    X-Received: by 10.49.64.234 with SMTP id r10mr2400483qes.24.1361023988296;
            Sat, 16 Feb 2013 06:13:08 -0800 (PST)
    Return-Path: <mailto.xxx@sss.sss>
    Received: from xxx.xxx.xxx.xx (108-166-58-34.static.cloud-ips.com. [xxx.xxx.xxx.xx])
            by mx.google.com with ESMTPS id f5sm20907313qac.5.2013.02.16.06.13.05
            (version=TLSv1.1 cipher=ECDHE-RSA-RC4-SHA bits=128/128);
            Sat, 16 Feb 2013 06:13:07 -0800 (PST)
    Date: Sat, 16 Feb 2013 09:14:05 -0500
    Return-Path: mailto.xxx@sss.sss
    To: xxx@xxx.xxx
    From: Duty of Care Alert <mailto.xxx@sss.sss>
    Reply-To: Duty of Care Alert <mailto.xxx@sss.sss>
    Subject: URGENT! ACTION NEEDED! You have been sent an Alert!
    Message-ID: <ec9d1361ab4c0fc1276216e75823d466@xx.xx.xx.34>
    X-Priority: 3
    X-Mailer: PHPMailer 5.2.1 (http://code.google.com/a/apache-extras.org/p/phpmailer/)
    MIME-Version: 1.0
    Content-Transfer-Encoding: 8bit
    Content-Type: text/html; charset="iso-8859-1"
    X-Nonspam: None
    
    
    <div style="background-color: #C0C0C0;height: auto;width: auto;padding: 10px">
                        <div><div style="float: left;"><img alt="" src='http://xxx.xxx.xxx.xx/doc_new/upload/1360856745Floor-Mat.jpg' height="92" width="94"></div>
                        <div style="float: right;margin-right: 5px;margin-top: -85px">
                            <div style="color: #B80000;font-weight: bold;padding: 2px;float:right">Alert Notification</div>
                            <div style="color: #413839;font-weight: bold;padding: 2px">Floor Mat Enterprises</div>
                        </div></div><br/><br/><br/><br/><br/><br/><br/>
                        <center><div style="color: #B80000;font-weight: bold;">Your Response Is Required!</div></center><br/>
                        <div style="color: #B80000;font-weight: bold" align="center">Alert Subtitle</div>
                        <div style="font-weight: bold" align="center">Alert Title</div><br/>
                        <div align="center">
                            <a href="http://xxx.xxx.xxx.xx/doc_new/alert/response/SAFE/Nw==/Mg==/MTUx" style="text-decoration:none;">
                                <div style="background-color: green;border: solid 1px green; border-radius:5px 5px 5px 5px;padding: 5px;color: white;text-align:center;width:158px">
                                    <span style="color: white;font-weight: bold;font-size:12px">YES TEXT</span><br/>
                                </div>
                            </a></div><br/><div align="center">
                            <a href="http://xxx.xxx.xxx.xx/doc_new/alert/response/UNSAFE/Nw==/Mg==/MTUx" style="text-decoration:none;">
                                <div style="background-color: #B80000;border: solid 1px #B80000; border-radius:5px 5px 5px 5px;padding: 5px;color: white;text-align:center;width:158px">
                                    <span style="color: white;font-weight: bold;font-size:12px">NO TEXT</span><br/>
                                </div>
                            </a>
                        </div><br/><br/>
                        <div style=" max-height:100px;position: absolute; top: 20px; left: 85px; width: auto;overflow-y: scroll;overflow-x: hidden;padding-right: 5px;visibility: visible; ">DESCRIPTION HERE.</div>
                        <div>http://xxx.xxx.xxx.xx/doc_new/upload/151/1361024039toth.jpg</div>
                    </div>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    The problem is likely to be that you aren't sending a complete HTML document in your EMail. You're just sending a block of HTML code. Email programs can vary widely in how they process messages - especially HTML, so you want to send well-formed HTML document that starts with a <!DOCTYPE> statement and <html> tag.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles