[Check_mk (english)] HTML Flexible Notification Emails and Outlook.

Archive checkmk-en
1

Hi All,

Has anyone made progress identifying why Outlook doesn't parse the CSS in the flexible notifications using HTML, they display perfectly on OSX mail (including graphs) Thunderbird and both iPhones and Android, however with the outlook 2013 client they loose the boarder and margin settings.

I have tinkered with putting it in a Div and creating a table however it is a total re-write and before I invest more time I was wondering if anyone has cracked it yet?

I am tending to think it's a CSS function that Outlook doesn't support but I can't see it for looking.

Regards,

James

2

Hi James - I've pasted below my modified in-line ccs which renders nice HTML emails in Outlook (we're on Outlook 2010). Note that I simplified the css significantly for our internal needs, so you may need to add some things back, depending on what you need.

From my highly random and unscientific analysis I believe that Outlook doesn't like multiple class tags within the CSS, e.g.:

.state0, .hstate0, .state0 a, .hstate0 a {
        background-color: #0b3; color: #fff;
}

Hope that helps.

Regards,

- Asher

···

-------------------------------------------------------

<style>
body {
    padding: 5px;
    font-family:arial;
    font-size: 12px;
}
table {
    border-spacing: 0px;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    empty-cells: show;
    width: 100%;
    color: black;
}
th {
    font-weight: normal;
    border: 1px solid #ccc;
    background-color: #999;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    font-size: 9pt;
    height: 14px;
}
td {
    border: 1px solid #ccc;
    padding: 2px 4px;
    height: 22px;
    vertical-align: middle;
}
tr.odd0 { background-color: #eee; }
tr.even0 { background-color: #ddd; }
td.odd0 { background-color: #eee; }
td.even0 { background-color: #ddd; }
tr.odd1 { background-color: #ffc; }
tr.even1 { background-color: #ffa; }
tr.odd2 { background-color: #fcc; }
tr.even2 { background-color: #faa; }
tr.odd3 { background-color: #ffe0a0; }
tr.even3 { background-color: #ffefaf; }
td.OK { background-color: #0b3; }
td.UP { background-color: #0b3; }
td.WARNING { background-color: #ff0; }
td.CRITICAL { background-color: #f00; }
td.DOWN { background-color: #f00; }
td.UNKNOWN { background-color: #f80; }
td.PENDING { background-color: #888; }
td.graphs {
    width: 617px;
    align: center;
}
td.graphs img {
    margin: 12px;
}
</style>

-----Original Message-----
From: checkmk-en-bounces@lists.mathias-kettner.de [mailto:checkmk-en-bounces@lists.mathias-kettner.de] On Behalf Of James Holden
Sent: Wednesday, October 02, 2013 11:27 PM
To: checkmk-en@lists.mathias-kettner.de
Subject: [Check_mk (english)] HTML Flexible Notification Emails and Outlook.

Hi All,

Has anyone made progress identifying why Outlook doesn't parse the CSS in the flexible notifications using HTML, they display perfectly on OSX mail (including graphs) Thunderbird and both iPhones and Android, however with the outlook 2013 client they loose the boarder and margin settings.

I have tinkered with putting it in a Div and creating a table however it is a total re-write and before I invest more time I was wondering if anyone has cracked it yet?

I am tending to think it's a CSS function that Outlook doesn't support but I can't see it for looking.

Regards,

James
_______________________________________________
checkmk-en mailing list
checkmk-en@lists.mathias-kettner.de
http://lists.mathias-kettner.de/mailman/listinfo/checkmk-en

3

This has been fixed in git:

commit 13d6d408ec43ba11f60d9165e72aeb82fc8d9728
Author: Lars Michelsen <lm@mathias-kettner.de>

     FIX Fixed rendering of HTML mails for Outlook (at least 2013)

     The HTML mails generated by the flexible notification script are
     now rendered nicely with Outlook. This change has been made with
     Outlook 2013.

Regards
Lars

···

Date: Wed Nov 20 13:42:34 2013 +0100

On 03.10.2013 05:26, James Holden wrote:

Hi All,

Has anyone made progress identifying why Outlook doesn't parse the CSS in the flexible notifications using HTML, they display perfectly on OSX mail (including graphs) Thunderbird and both iPhones and Android, however with the outlook 2013 client they loose the boarder and margin settings.

I have tinkered with putting it in a Div and creating a table however it is a total re-write and before I invest more time I was wondering if anyone has cracked it yet?

I am tending to think it's a CSS function that Outlook doesn't support but I can't see it for looking.

Regards,

James
_______________________________________________
checkmk-en mailing list
checkmk-en@lists.mathias-kettner.de
http://lists.mathias-kettner.de/mailman/listinfo/checkmk-en