0
votes

Thanks in advance. I have been researching various methods that would permit an import of html code or .html file into an outlook 2010 e-mail using VBA but to my frustration I am noticing that all import techniques seem to result in all the style elements contained with the HEAD is stripped out.

As an example when using Thunderbird with the same html CSS code it works flawlessly and when sending out the recipients seem to get the styling as well despite the client (gmail,yahoo etc etc). Thunderbird does the job perfectly with a simple input as HTML. So why am I trying to achieve this with outlook? Simply put the client wants to use outlook 2010.

I find it hard to believe there isn't some nifty work around to prevent Outlook from stripping this content then upon sending the email retaining the HEAD content as well so that the responsive styles work correctly.

Here is what I have been using so far

VBA References

  • Visual Basic For Applications
  • Microsoft Outlook 14.0 Object Library
  • Microsoft Office 14.0 Object Library
  • Microsoft Word 14.0 Object Library
  • OLE Automation

CODE THAT IS GETTING STRIPPED

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

<style type="text/css">

body{width:100%;margin:0px;padding:0px;background:#444444;text-align:center;}
html{width: 100%; }
img {border:0px;text-decoration:none;display:block; outline:none;}
a,a:hover{color:#ee7716;text-decoration:none;}.ReadMsgBody{width: 100%; background-color: #ffffff;}.ExternalClass{width: 100%; background-color: #ffffff;}
table {border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } 
.padtop10 {padding-top:10px;}
.main-bg{ background:#444444;}
.pads {padding:0px 15px 0px 15px;}
.mobdes{font-size:10px;}
@media only screen and (max-width:640px)

{
    body{width:auto!important;}
    .padtop10 {padding-top:0px;}
    .main{width:100% !important;margin:0px; padding:0px;}
    .two-column{width:100% !important;margin:0px; padding:0px;}
    .mobileCenter{width: 100% !important; text-align: center!important;}
    .two-left{width: 100% !important; text-align: center!important;}
    .date{font:Bold 14px Arial, Helvetica, sans-serif; color:#ee7716;}
    .mobdes{font-size:8px !important;}
    .customobpad{padding-top:30px !important;}

}

@media only screen and (max-width:479px)
{
    body{width:auto!important;}
    .padtop10 {padding-top:15px;}
    .main{width:100% !important;margin:0px; padding:0px;}
    .two-column{width:100% !important;margin:0px; padding:0px;}
    .mobileCenter{width: 100% !important; text-align: center!important;}
    .two-left{width: 100% !important; text-align: center!important;}
    .date{font:Bold 12px Arial, Helvetica, sans-serif; color:#ee7716;}
    .mobilogo {height:49px; width:190px !important; padding-left:15px !important; margin-left:-15px;}
    .pads {padding:0px 18px 0px 28px;}
    .mobdes{font-size:8px !important;}
    .customobpad{padding-top:30px !important;}
}
@media only screen and (max-width:800px)
and (orientation : landscape) {
body{width:auto!important;}
    .padtop10 {padding-top:5px;}
    .main{width:100% !important;margin:0px; padding:0px;}
    .two-column{width:100% !important;margin:0px; padding:0px;}
    .mobileCenter{width: 100% !important; text-align: center!important;}
    .two-left{width: 100% !important; text-align: center!important;}
    .date{font:Bold 12px Arial, Helvetica, sans-serif; color:#ee7716;}
    .mobilogo {height:39px; width:172px; padding-left:15px !important; margin-left:-15px;}
    .pads {padding:0px 18px 0px 28px;}
    .mobdes{font-size:8px !important;}
    .customobpad{padding-top:30px !important;}
}



</style>

</head>

VBA MACRO CODE FOR IMPORT

Sub InsertHTMLClean2()
Dim insp As Inspector
Set insp = ActiveInspector
If insp.IsWordMail Then
Dim wordDoc As Word.Document
Set wordDoc = insp.WordEditor
Dim FileToOpen As String
FileToOpen = InputBox("filename?")
wordDoc.Application.Selection.InsertFile FileToOpen, , False, False, False
End If
End Sub

I appreciate that many developers say that outlook 2010 cannot retain head info but i'm wondering if anybody has found a solution that works. I'm primarily interested in retaining the MEDIA QUERIES CSS as in its current state the mobile styling is whats breaking. Failing that any suggestions on how I can retrain Media query CSS styles within an outlook html email.

Thanks again.

1

1 Answers

0
votes

As you might know Outlook uses Word as an email editor. That's why you see differences between Thuderbird and Outlook. The following series of articles provides reference documentation related to supported and unsupported HTML elements, attributes, and cascading style sheets properties.