Issues with emailing on XF2.0

[Kainzo]

Is there anyway aroaund this?

* {
    margin:0;
    padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }

img {
    max-width: 100%;
}
.collapse {
    margin:0;
    padding:0;
}
body {
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
    width: 100%!important;
    height: 100%;
}
a { color: #2BA6CB;}
.btn {
    text-decoration:none;
    color: #FFF;
    background-color: #666;
    padding:10px 16px;
    font-weight:bold;
    margin-right:10px;
    text-align:center;
    cursor:pointer;
    display: inline-block;
}
p.callout {
    padding:15px;
    background-color:#ECF8FF;
    margin-bottom: 15px;
}
.callout a {
    font-weight:bold;
    color: #2BA6CB;
}
table.social {

    background-color: #ebebeb;
  
}
.social .hclinks {
    padding: 3px 7px;
    font-size:12px;
    margin-bottom:10px;
    text-decoration:none;
    color: #FFF;font-weight:bold;
    display:block;
    text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.hcf { background-color: #D1B60A!important; }
a.ms { background-color: #000!important; }
a.wl { background-color: #D1140A!important; }
.sidebar .hclinks {
    display:block;
    width:100%;
}
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
table.body-wrap { width: 100%;}
table.footer-wrap { width: 100%;    clear:both!important;
}
.footer-wrap .container td.content  p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
    font-size:10px;
    font-weight: bold;
  
}
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#93CBFA;}
.collapse { margin:0!important;}
p, ul {
    margin-bottom: 10px;
    font-weight: normal;
    font-size:14px;
    line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
    margin-left:5px;
    list-style-position: inside;
}
ul.sidebar {
    background:#ebebeb;
    display:block;
    list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
    text-decoration:none;
    color: #666;
    padding:10px 16px;

    margin-right:10px;

    cursor:pointer;
    border-bottom: 1px solid #777777;
    border-top: 1px solid #FFFFFF;
    display:block;
    margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
.container {
    display:block!important;
    max-width:600px!important;
    margin:0 auto!important;
    clear:both!important;
}
.content {
    padding:15px;
    max-width:600px;
    margin:0 auto;
    display:block;
}
.content table { width: 100%; }
.column {
    width: 300px;
    float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
    padding:0!important;
    margin:0 auto;
    max-width:600px!important;
}
.column table { width:100%;}
.social .column {
    width: 280px;
    min-width: 279px;
    float:left;
}
.clear { display: block; clear: both; }
@media only screen and (max-width: 600px) {
  
    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

    div[class="column"] { width: auto!important; float:none!important;}
  
    table.social div[class="column"] {
        width:auto!important;
    }
}

ErrorException: [E_WARNING] DOMXPath::query(): Invalid expression in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 984

1. XF::handlePhpError()
2. DOMXPath->query() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 984
3. Pelago\Emogrifier->existsMatchForCssSelector() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 940
4. Pelago\Emogrifier->copyCssWithMediaToStyleNode() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 410
5. Pelago\Emogrifier->process() in src/vendor/pelago/emogrifier/Classes/Emogrifier.php at line 289
6. Pelago\Emogrifier->emogrify() in src/XF/Mail/Styler.php at line 36
7. XF\Mail\Styler->styleHtml() in src/XF/Mail/Mailer.php at line 189
8. XF\Mail\Mailer->renderMailTemplate() in src/XF/Mail/Mail.php at line 278
9. XF\Mail\Mail->renderTemplate() in src/XF/Mail/Mail.php at line 327
10. XF\Mail\Mail->getSendableMessage() in src/XF/Mail/Mail.php at line 341
11. XF\Mail\Mail->send() in src/XF/Job/UserEmail.php at line 69
12. XF\Job\UserEmail->executeAction() in src/XF/Job/AbstractUserCriteriaJob.php at line 59
13. XF\Job\AbstractUserCriteriaJob->run() in src/XF/Admin/Controller/User.php at line 1029
14. XF\Admin\Controller\User->actionEmailSend() in src/XF/Mvc/Dispatcher.php at line 249
15. XF\Mvc\Dispatcher->dispatchClass() in src/XF/Mvc/Dispatcher.php at line 89
16. XF\Mvc\Dispatcher->dispatchLoop() in src/XF/Mvc/Dispatcher.php at line 41
17. XF\Mvc\Dispatcher->run() in src/XF/App.php at line 1931
18. XF\App->run() in src/XF.php at line 328
19. XF::runApp() in admin.php at line 13

 

[Chris D]

To ensure the best stylistic compatibility with as many email clients as possible, we convert CSS rules into inline style attributes on elements using a library called "Emogrifier".

For it to be falling over here, it's possible there is something in your code it doesn't like.

My initial suspicion is this bit:

@media only screen and (max-width: 600px) {
  
    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}

    div[class="column"] { width: auto!important; float:none!important;}
  
    table.social div[class="column"] {
        width:auto!important;
    }
}

Specifically I wonder if it's the class="blah" bits because it's fairly weird targeting an element's class attribute in that way.

If it isn't that, you really need to just keep removing and re-adding bits in until it starts working so we can narrow down what (if anything) is causing it to fall over. We can then ascertain if that's something bad in the CSS or a bug that needs fixing in the code.