I have an issue with iText. Actually it's multiple issues, but the first and most pressing is that it doesn't render all my html. It stops after 1 page.
I've tried the online test that IText has https://itextpdf.com/demos/convert-html-css-to-pdf-free-online
It shows the same behaviour, so i suspect that there is something with the HTML i generate that doesn't work with iText.
Furthermore, it doesn't appear to respect the area which it's allowed to render in:
It writes HTML down in my footer, which it shouldn't do.
This has all worked with a different html layout using a lot of tables, but we are trying to switch to flexbox.
We have a lot of code that sets up footer and header, but since the Itext demo itself fails with my HTML, i suspect the error is in the HTML and not our other code.
I hope some wizard in iText is able to point out what could be cause this to happen.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#font-face {
font-family: Noto;
src: url("fonts/noto/NotoSans-Regular.ttf");
}
.testDesign {
font-family: Noto;
font-size: 12px;
display: flex;
flex-direction: column;
flex: 1 0 auto;
color: #000000;
}
.testDesign :where(h1,
h2,
h3,
h4,
h5,
h6) {
font-family: Noto;
margin-bottom: 0;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6,
.testDesign .h1,
.testDesign .h2,
.testDesign .h3,
.testDesign .h4,
.testDesign .h5,
.testDesign .h6 {
font-weight: 500;
}
.testDesign h1,
.testDesign h2,
.testDesign h3,
.testDesign h4,
.testDesign h5,
.testDesign h6 {
margin-top: 0;
margin-bottom: 0;
}
.testDesign :root {
accent-color: #272F96;
}
.testDesign body {
padding-bottom: 0;
--general-layout-separate-number-column-width: 50px;
}
.testDesign .test-disabled {
opacity: 0.4;
pointer-events: none;
}
.testDesign .form-check-inline .form-check-input {
margin-right: 0;
}
.testDesign .form-check-input~.form-check-label {
padding-left: .3125rem;
}
.testDesign .preview-logo {
font-family: Noto;
font-size: 24px !important;
text-align: center !important;
letter-spacing: -2px;
}
.testDesign .test-heading {
font-family: Noto;
font-size: 36px !important;
text-align: center !important;
color: #e51010 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-left: 2px !important;
padding-top: 27px !important;
padding-bottom: 27px !important;
margin-top: 29px !important;
margin-bottom: 37px !important;
}
.testDesign .product-heading {
font-family: Noto;
font-size: 28px !important;
text-align: center !important;
color: #000000 !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none !important;
text-decoration: underline !important;
padding-left: 0px !important;
margin-top: 0px !important;
margin-bottom: 41px !important;
}
.testDesign .section-heading {
font-family: Noto;
font-size: 15px !important;
text-align: center !important;
color: #000000 !important;
font-weight: normal !important;
font-style: italic !important;
text-transform: uppercase !important;
text-decoration: none !important;
background-color: #a2abeb !important;
padding-top: 24px !important;
padding-right: 12px !important;
padding-bottom: 24px !important;
padding-left: 36px !important;
margin-top: 48px !important;
margin-bottom: 36px !important;
border-left-width: 6px;
border-left-color: #e51010;
border-left-style: solid;
border-right-width: 6px;
border-right-color: #e51010;
border-right-style: solid;
border-top-width: 6px;
border-top-color: #e51010;
border-top-style: solid;
border-bottom-width: 6px;
border-bottom-color: #e51010;
border-bottom-style: solid;
}
.testDesign .section-heading::after {
content: "";
}
.testDesign .logo-width {
width: 23%;
}
.testDesign .lvl-1 {
font-family: Noto;
padding-left: 0px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-1 .lvl-1-body {
padding-left: 58px;
}
.testDesign .lvl-1 .lvl-1-body {
padding-left: 8px;
}
.testDesign .lvl-2 {
font-family: Noto;
padding-left: 8px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-2 {
padding-left: 58px;
}
.testDesign .lvl-2 .lvl-2-body {
padding-left: 16px;
}
.general-layout--columns .testDesign .lvl-2 .lvl-2-body {
padding-left: 0;
}
.testDesign .lvl-3 {
font-family: Noto;
padding-left: 24px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-3 {
padding-left: 74px;
}
.testDesign .lvl-3 .lvl-3-body {
padding-left: 32px;
}
.general-layout--columns .testDesign .lvl-3 .lvl-3-body {
padding-left: 0;
}
.testDesign .lvl-4 {
font-family: Noto;
padding-left: 56px;
margin-bottom: 12px;
line-height: 1.2;
}
.general-layout--separate-number-column .testDesign .lvl-4 {
padding-left: 106px;
}
.general-layout--columns .testDesign .lvl-4 .lvl-4-body {
padding-left: 0;
}
.testDesign .lvl-1-heading {
font-size: 15px !important;
color: #1111aa !important;
font-weight: bold !important;
font-style: italic !important;
text-transform: none;
text-decoration: underline !important;
}
.testDesign .lvl-1-heading::after {
content: "";
}
.testDesign .lvl-2-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-2-heading::after {
content: "";
}
.testDesign .lvl-3-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-3-heading::after {
content: "";
}
.testDesign .lvl-4-heading {
/* font-size: 13px !important; */
font-size: 12px !important;
color: #1111aa !important;
font-weight: normal !important;
font-style: normal !important;
text-transform: none;
text-decoration: none !important;
}
.testDesign .lvl-4-heading::after {
content: "";
}
.testDesign table {
border-collapse: collapse;
}
.testDesign table th,
.testDesign table td {
font-size: 90%;
vertical-align: top;
padding: 3px 2px;
border-width: 1px;
border-style: solid;
border-top-color: #999999;
border-bottom-color: #999999;
border-left-color: transparent;
border-right-color: transparent;
}
.testDesign table th {
color: #000000;
background-color: transparent;
}
.testDesign .a4-page-container {
width: 52rem;
height: 7000px;
overflow-y: hidden;
position: relative;
}
.testDesign .a4-page-container.a4-landscape {
width: 73.46rem;
height: 52rem;
}
.testDesign .a4-page-footer {
position: absolute;
height: 4rem;
border-top: 1px solid #D6DCE0;
right: 3rem;
bottom: 0;
left: 3rem;
background-color: #fff;
opacity: .8;
}
.testDesign .letter-spacing-1 {
letter-spacing: 1px;
}
.testDesign .almego-test-designer-properties-grid {
display: grid;
grid-template-columns: 6rem 1fr;
}
.testDesign .preview-highlight-selected-editor {
position: relative;
}
:not(.previewAllContent) .testDesign .preview-highlight-selected-editor::before {
content: "";
position: absolute;
width: 2px;
left: -24px;
top: -2px;
bottom: -2px;
background: #9397CA;
}
.previewAllContent .testDesign .preview-highlight-selected-editor::before {
display: none;
}
.testDesign .preview-hover-highlight-selectable-editor:not(.preview-highlight-selected-editor) {
opacity: .35;
}
.previewAllContent .preview-hover-highlight-selectable-editor {
opacity: 1 !important;
}
.testDesign .preview-hover-highlight-selectable-editor:hover {
outline: 1px dashed #D4D5EA;
outline-offset: 5px;
opacity: 1;
}
#keyframes backgroundFadeOut {
0% {
background: #9397CA;
}
100% {
background: transparent;
}
}
#keyframes navBackgroundColorFade {
0% {
background-color: #D1F2FA;
}
100% {
background-color: transparent;
}
}
.testDesign .highlightNav {
animation: navBackgroundColorFade 5s ease;
}
.testDesign .color-preview {
height: 1rem;
width: 1rem;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.testDesign .general-layout--separate-number-column .lvl-1-heading {
display: flex;
flex-direction: row;
}
.testDesign .general-layout--separate-number-column .lvl-1-number {
width: 50px;
}
.testDesign .general-layout--columns .lvl-container:not(.lvl-1) {
display: flex;
width: 100%;
flex-direction: row;
}
.testDesign .general-layout--columns .lvl-heading:not(.lvl-1-heading) {
width: 25%;
}
.testDesign .general-layout--columns .lvl-body:not(.lvl-1-body) {
padding-left: 5px;
}
.testDesign .layout-grid {
grid-template-columns: 26rem 1fr 1fr 1fr 1fr 1fr;
}
.testDesign .grid-template-maxc-1fr {
grid-template-rows: max-content 1fr;
}
.testDesign .box-illustration {
height: 1rem;
width: 1rem;
border-width: 1px;
border-style: solid;
border-color: #c3c3c3;
position: relative;
}
.testDesign .box-illustration.top {
border-top-color: #272F96;
border-top-width: 2px;
}
.testDesign .box-illustration.right {
border-right-color: #272F96;
border-right-width: 2px;
}
.testDesign .box-illustration.bottom {
border-bottom-color: #272F96;
border-bottom-width: 2px;
}
.testDesign .box-illustration.left {
border-left-color: #272F96;
border-left-width: 2px;
}
.testDesign .box-illustration.center-horizontal::before {
content: "";
position: absolute;
top: .35rem;
left: 0;
right: 0;
height: 2px;
background-color: #272F96;
}
.testDesign .chevron-down {
display: inline-block;
transform: rotate(90deg);
font-size: 1rem;
line-height: 1px;
}
.testDesign .active-nav-bg {
background-color: #e9ecef !important;
}
</style>
</head>
<body>
<div id="document">
<?xml version="1.0" encoding="utf-16"?>
<div class="testDesign" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<div class="general-layout--columns general-layout--separate-number-column">
<h2 class="test-heading">TEST BIG HEADER</h2>
<h1 class="product-heading">Test sub heading</h1>
<section class="section">
<h2 class="section-heading">Section 1: Test section heading</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading">
<span class="lvl-1-number pr-1g">1.1 </span>
<span class="lvl-1-title">Testidentifikation</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading">
<span class="lvl-2-title">Testname</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>test test test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.2 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test sub level 2 header</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>No special</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.3 </span><span class="lvl-1-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</span>
</h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test and test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div data-paragraphno=""><b>Test</b></div>
<div>Test</div>
<div>4000<span style="padding-left: 0.4em;">Test</span></div>
<div>Test</div>
<div>12 34 56 78</div>
<div>test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>24-06-2022</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">test Version</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>1.0</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">1.4 </span><span class="lvl-1-title">Test</span></h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 2: Test section 2 header</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.1 </span><span class="lvl-1-title">Test sub header</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body" />
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">""</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Warning</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>-</div>
</div>
</div>
<div class="lvl-3 lvl-container">
<h3 class="lvl-3-heading lvl-heading"><span class="lvl-3-title">Test</span>
</h3>
<div class="lvl-3-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">2.3 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Test</div>
</div>
</div>
<div class="lvl-2 lvl-container">
<h3 class="lvl-2-heading lvl-heading"><span class="lvl-2-title">Test</span>
</h3>
<div class="lvl-2-body lvl-body">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
</div>
</section>
<section class="section">
<h2 class="section-heading">Section 3: testing heading 3</h2>
<div class="section-body">
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-number pr-1g">3.2 </span><span class="lvl-1-title">Test</span></h3>
</div>
<div class="pl-4 pb-2">
<table border="1">
<tr>
<th style="width:23%">Test</th>
<th style="width:27%">Test</th>
<th style="width:14%">test</th>
<th style="width:30%">Test</th>
<th style="width:6%">Test</th>
</tr>
<tr>
<td>Test</td>
<td>
<table>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
</td>
<td>Test</td>
<td>Test<br/></td>
<td/>
</tr>
</table>
</div>
<div class="lvl-1 lvl-container">
<div class="lvl-1-body lvl-body">
<div>-----</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
</div>
</div>
<div class="lvl-1 lvl-container">
<h3 class="lvl-1-heading lvl-heading"><span class="lvl-1-title">Test</span>
</h3>
<div class="lvl-1-body lvl-body">
<div>Test</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Related
I'm having trouble trying to get borders visible on certain mail client apps on Android and iOS. Borders are displayed corerctly on web browsers and Desktop clients like ThunderBird or Outlook.
Actual result on Android with Yahoo removing forcered inline styles.
Actual result on iOS with Gmail this time removing forcered inline styles.
MJML code:
<mjml>
<mj-head>
<mj-style>
.foo-title { margin-bottom: 0; white-space: nowrap; } .foo-sub-title { color: rgba(0,0,0,.8); margin-top: 0; font-size: 14px; margin-bottom: 0; white-space: nowrap; font-size: 14px; }
</mj-style>
</mj-head>
<mj-body>
<mj-section padding-top="0" padding-bottom="0">
<mj-column width="100%">
<mj-table css-class="foo" border="none" cellpadding="0" cellpadding="0">
<tr>
<td colspan="2" style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title" style="font-size: 35px;">0Z00</p>
<p class="foo-sub-title" style="padding-top:5px">Localizador</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">29/03</p>
<p class="foo-sub-title">2021</p>
</td>
</tr>
<tr>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">TEE 00</p>
<p class="foo-sub-title">Salida</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">00:00</p>
<p class="foo-sub-title">Hora</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">1</p>
<p class="foo-sub-title">Jugadores</p>
</td>
</tr>
<tr>
<td colspan="3" style="border: 3px solid black !important;padding: 5px 15px;">
<p style="font-size: 16px;">Green fees 9 hoyos</p>
</td>
</tr>
<tr>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€</p>
<p class="foo-sub-title">Total</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€</p>
<p class="foo-sub-title">Pago realizado</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€ *</p>
<p class="refooserva-sub-title">Pago pendiente</p>
</td>
</tr>
<tr>
<td colspan="3" style="border: none !important; padding: 15px;"></td>
</tr>
<tr>
<td style="border-bottom: 3px solid black !important; border-left: 3px solid black !important; border-right: 3px solid black !important; border-top: none !important; padding-bottom: 0; padding-top: 15px; padding-left: 15px; padding-right: 15px; font-size: 14px;" colspan="3">
<p style="pading-top:0; margin-top: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Generated HTML
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
<tr>
<td colspan="2" style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title" style="font-size: 35px;">0Z00</p>
<p class="foo-sub-title" style="padding-top:5px">Localizador</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">29/03</p>
<p class="foo-sub-title">2021</p>
</td>
</tr>
<tr>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">TEE 00</p>
<p class="foo-sub-title">Salida</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">00:00</p>
<p class="foo-sub-title">Hora</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">1</p>
<p class="foo-sub-title">Jugadores</p>
</td>
</tr>
<tr>
<td colspan="3" style="border: 3px solid black !important;padding: 5px 15px;">
<p style="font-size: 16px;">Green fees 9 hoyos</p>
</td>
</tr>
<tr>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€</p>
<p class="foo-sub-title">Total</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€</p>
<p class="foo-sub-title">Pago realizado</p>
</td>
<td style="border: 3px solid black !important; padding: 15px;">
<p class="foo-title">0,00€ *</p>
<p class="refooserva-sub-title">Pago pendiente</p>
</td>
</tr>
<tr>
<td colspan="3" style="border: none !important; padding: 15px;"></td>
</tr>
<tr>
<td style="border-bottom: 3px solid black !important; border-left: 3px solid black !important; border-right: 3px solid black !important; border-top: none !important; padding-bottom: 0; padding-top: 15px; padding-left: 15px; padding-right: 15px; font-size: 14px;" colspan="3">
<p style="pading-top:0; margin-top: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>
</tr>
</table>
Some email clients don't like particular formatting such as !important, and will remove the whole style section if that is present.
Also it's always best to use HEX format for colours (i.e. #000000 not 'black'), though I think all email clients know what black is, but many interpret other colours inconsistently (and from memory Windows 10 App doesn't like rgb format).
I would like to ask if a message can be made by a Outlook, so I put a picture as a background and write the content of the message above it, knowing it must be compatible with Gmail and Outlook.
This is a pretty bullet-proof solution:
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
<tr>
<td valign="middle" style="text-align: center; background-image: url('https://via.placeholder.com/600x230/222222/666666'); background-color: #222222; background-position: center center !important; background-size: cover !important;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:175px; background-position: center center !important;">
<v:fill type="tile" src="https://via.placeholder.com/600x230/222222/666666" color="#222222" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" style="text-align: center; padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
<p style="margin: 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Bulletproof Background Images: https://backgrounds.cm
Email template: https://tedgoas.github.io/Cerberus/
I've used Mailchimp to build the main template structure and then modified properties and added some elements to get it working on Outlook versions.
It looks fine on most of web clients, desktop clients (Thunderbird and Mail[Apple]), but in Outlook, a white gap appears.
I've checked the code multiple times, done modifications and the only thing I'm getting is to move down or up the white gap. I've modified the template and put some stock content so you can check the source code.
Here is a codepen to check the source code: https://codepen.io/anon/pen/wEoxKy
<div class="col num6" style="max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;background-color:#000000;">
<div style="background-color: #000000; width: 100% !important;"><!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 5px;"><!--<![endif]-->
<div align="center" class="img-container center autowidth fullwidth " style="padding-right: 0px; padding-left: 0px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0.5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth fullwidth" height="auto" src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1ce36b9c8-funny-weird-wtf-stock-photos-coverimage.jpg" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 261px; max-width: 245px; display: block !important;" title="Image" width="262.5" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-top: 5px; height: 40px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px; padding-top: 5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth " height="auto" src="https://via.placeholder.com/170x40" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 192px; max-width: 168px; display: block !important;" title="Image" width="192" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="80" style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;background-color:#000000;"><![endif]-->
<div class="bwmxstext" style="color:#998b70;line-height:150%;font-family:'Roboto', sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">
<div style="font-size:12px;line-height:18px;color:#fff;font-family:'Roboto', sans-serif;text-align:left;height: 80px;">
<p style="margin: 0;font-size: 12px;line-height: 18px;text-align: center"><span style="font-size: 13px; line-height: 25px;"><strong><span style="line-height: 25px; font-size: 13px;">LOREM IPSUM</span></strong></span></p>
<p style="margin: 0;font-size: 11px;line-height: 16px;text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum dictum sollicitudin. Donec mattis mauris et massa dapibus, at posuere neque mollis.</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-bottom: 10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;background-color:#000000;"><td width="25%" align="right"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-left.png"></td><td style="padding-right: 0px; padding-left: 0px; background-color: #fff; vertical-align: middle;" width="50%" valign="middle" align="center"><![endif]--> BOOK NOW <!--[if mso]></td><td width="25%" align="left"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-right.png"></td></tr></table><![endif]--></div>
<!--[if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
This is how it's seen on Outlook 2010. I can't find any element causing that white gap. Also tried to set the main container to black so maybe I could hide it but it's not getting the color at all.
I started learning HTML and CSS approximately two months ago. I'm struggling a little when it comes to adding a 'Comment' section in my contact form.
I've not succeeded to add a larger text box for users to enter their message. Why can't I make my message textarea bigger?
Here's the code:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Netflix Title Recommendations</title>
<style>
header {
text-align: center;
margin-bottom: 40px;
text-shadow: 16px 8px 16px grey;
color: #C0392B;
}
.headers1 {
font-size: 48px;
font-family: garamond, serif;
}
.headers2 {
font-size: 24px;
font-family: garamond, serif;
}
.container {
width: 800px;
height: auto;
margin-left: auto;
margin-right: auto;
}
nav {
text-align: center;
padding: 0px 0px 15px 0px;
}
ul {
list-style-type: none;
margin: auto;
padding: 0;
width: 35%;
height: 100%;
}
li {
padding: 5px;
display: block;
}
li a {
color: #000;
text-decoration: none;
font-family: garamond, serif;
font-size: 16px;
font-weight: bold;
}
.button1, .button2, .button3, .button4, .button5, .button6 {
background-color: #4CAF50;
box-shadow: 5px 10px #f1f1f1;
-webkit-border-radius: 15px
}
.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
background-color: white;
}
.main {
text-align: justify;
font-family: garamond, serif;
font-size: 16px;
}
footer {
text-align: center;
font-size: 14px;
font-family: garamond, serif;
background-color: #E5E7E9;
padding: 10px;
}
</style>
</head>
<body class="container">
<header>
<h1 class="headers1">Netflix UK Title Recommendations</h1>
<h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
</header>
<nav>
<ul>
<button class="button1"><li>Home</li></button>
<button class="button2"><li>About</li></button>
<button class="button3"><li>Films</li></button>
<button class="button4"><li>TV</li></button>
<button class="button5"><li>Contact</li></button>
<button class="button6"><li>Disclaimer</li></button>
</ul>
</nav>
<div class="main">
<p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to
learn more about us in the 'About' section.</p>
<p>We update this web site every week, so be sure to check back with us regularly to learn about
some of the greatest new content you will find on Netflix UK.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc.
Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis.
Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem.
Aliquam sodales ipsum ac elementum venenatis.</p>
<p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat.
Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet.
Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh.
Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper.
Nam eu rutrum lacus, a hendrerit leo.</p>
</div>
<!-- Contact form starts here -->
<form class="contactform">
<fieldset>
<legend>Personal Information:</legend>
<h3>Contact Me</h3>
<label>First Name:</label><br />
<input name="firstname" type="text"><br />
<label>Last Name:</label><br />
<input name="lastname" type="text"><br />
<label>Email:</label><br />
<input name="email" type="email"><br />
<label>Gender:</label><br />
<input type="radio" name="gender" value="male" checked> Male<br />
<input type="radio" name="gender" value="female"> Female<br />
<label for="msg">Message</label>
<textarea="message" name="comment">Enter your message here</textarea><br />
<input type="submit" value="Send" class="submit">
</fieldset>
</form>
<!-- Contact form ends here -->
<footer>Mathew J. M. | 2018 ™</footer>
</body>
</html>
It's a simple typo, you've wrote
<textarea="message" name="comment"></textarea>
when it's actually:
<textarea class="message" name="comment"></textarea>
Then you should be able to fix your css:
.message{
height: 500px;
width: 600px;
}
I've been turning this design over all day. Basically there's a white bar on the side of my email design that I can not figure out how to remove. It's only present in iOS9 and should have something to do with my html, body, #mainWrapper, or #main. I've tried negative margin adding/removing min-widths.
How do I remove the right bar for a 100% response layout? Any ideas would be helpful.
Here is a picture of the problem.
And here is my HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xxxxx</title>
<style data="noinline">
body {
width: 100% !important;
margin:0 !important;
padding:0 !important;
}
.appleLink a,
.appleLink,
.telLink {
color:#646469 !important;
text-decoration:none !important;
}
.appleLinkWhite a,
.appleLinkWhite {
color:#ffffff !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important; table-layout:fixed !important; min-width:100% !important;}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table [id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroWrapper],
table[id=messageHeaderWrapper],
table[id=messageWrapper],
table[id=ctaWrapper],
table[id=footerWrapper]{
margin:0 auto !important;
width:100% !important;
padding:0 !important;
}
table[id=logoMobile] {
background:#ffffff;
}
table[id=logoMobile] img
table[id=hero] img {
display: block !important;
height:auto !important;
width:100% !important;
}
table[id=footer] img {
display: block !important;
height:auto !important;
width:60% !important;
margin:0 auto;
}
td[id=cta] img {
display: block !important;
height:auto !important;
width:60% !important;
margin:0 auto 3px auto;
}
td[id=messageHeader] {
margin-top:3px;
}
td[id=leadline],
td[id= requiredFooterText] {
font-size: 14px !important;
}
td[id=messageHeader],
td[id=messageBody] {
font-size: 20px !important;
}
table[id=bulletList],
table[id=requiredFooter] {
width:85% !important;
margin:0 auto !important;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink,
.telLink {
color:#646469 !important;
text-decoration:none !important;
}
.appleLinkWhite a,
.appleLinkWhite {
color:#ffffff !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display:none;
max-height:0;
font-size:0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#mainWrapper {
background: #646469;
width:100%;
height:auto;
}
#logoWrapper {
background: #ffffff;
}
#leadlineWrapper {
background: #ffffff;
}
#leadline {
color: #646469;
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#heroWrapper,
#messageHeaderWrapper {
width: 600px;
margin: 0 auto;
background-color:#e0e0e1;
}
#messageHeader {
padding-bottom: 25px;
padding-left: 35px;
padding-right: 35px;
color: #333333;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.5;
background-color:#e0e0e1;
}
#leadlineWrapper,
#messageWrapper,
#ctaWrapper {
width: 600px;
margin: 0 auto;
background-color:#ffffff;
}
#messageBody {
padding-top: 25px;
padding-left: 35px;
padding-right: 35px;
color: #646469;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.5;
}
#messageBody a {
color: #8b1b3f;
}
#bulletList td {
vertical-align:top;
color: #646469;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.5;
}
.bullet {
width:14px;
line-height: 1.5;
}
#ctaContainer {
text-align: center;
display:block;
}
#cta {
padding:35px;
}
#footerWrapper {
background-color:#333333;
width:600px;
}
#footer {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#footer img{
display: inline-block;
}
#requiredFooterText {
color: #ffffff;
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center"><tr>
<td>
<table id="headerWrapper" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="logoContainer">
<table class="mobileHide" id="logoDesktop" border="0" cellspacing="0" cellpadding="0" align="center" style="width:600px; background-color:#ffffff;"><tr>
<td style="text-transform: none;">
<a href="xxxxx" target="_blank">
<img src="https://xxxxx/logo_desktop.jpg" width="600" height="auto" border="0" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; text-transform: none;" alt="xxxxx"></a>
</td>
</tr></table>
<!-- /#logoDesktop --><div class="mobileShow">
<table class="mobileShow" id="logoMobile" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td style="text-transform: none;">
<a class="mobileShow" href="http://xxxxx" target="_blank">
<img class="mobileShow" src="https://xxxxx/logo_mobile.jpg" width="100%" height="auto" border="0" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; text-transform: none;" alt="xxxxx"></a>
</td>
</tr></table>
<!-- /#logoMobile -->
</div>
</td>
</tr>
<tr>
<td>
<table id="leadlineWrapper" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
<td id="leadline">Scenic surroundings and big-city opportunities.</td>
</tr></table>
<!-- /#leadlineWrapper -->
</td>
</tr>
</table>
<!-- /#headerWrapper --><table id="main" width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tbody>
<tr>
<td id="heroContainer">
<table id="heroWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="hero" style="text-transform: none; border-collapse: collapse;">
<a href="xxxxx" id="auto_lnk_id 3" name="auto_lnk_name 3" target="_blank">
<img alt="xxxxxx" border="0" src="https://xxxxx/hero_msg6.jpg" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; border: 0; width:600px; height:350px;" /></a>
</td>
</tr>
</table>
<table id="messageHeaderWrapper" align="center" border="0" cellpadding="0" cellspacing="0"><tr>
<td id="messageHeader" style="text-transform: none;">[Contact.First Name],<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae sem finibus, consectetur nunc a, congue purus. Quisque maximus est nec lectus posuere ornare. In sit amet feugiat lectus.</td>
</tr>
</table>
<!-- /#hero -->
</td>
<!-- /#heroWrapper -->
</tr>
<tr>
<td id="messageContainer">
<table id="messageWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="messageBody" style="text-transform: none; border-collapse: collapse;">
<strong>Cras euismod.</strong><br />Suspendisse non eros in dolor posuere lobortis. Suspendisse non odio congue, imperdiet diam quis, pretium leo. Curabitur ac nulla elit.<br /><br /><strong>Vestibulum egestas.</strong><br />Curabitur ac convallis erat. Nullam at ultrices eros. Donec ac metus justo. Ut bibendum metus eu sodales commodo.<br /><br /><strong>Praesent eget.</strong><br /> Vivamus varius, augue ac egestas pharetra, leo nibh varius risus, in porta purus nibh a nulla. Donec gravida vitae tellus at accumsan.<br /><br />Etiam nisi orci, vulputate nec blandit at, suscipit ac lorem.
</td>
<!-- /#messageBody --></tr>
</tbody>
</table>
<!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td id="ctaContainer">
<table id="ctaWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" id="cta" style="text-transform: none; border-collapse: collapse;">
<img alt="xxxxxx" border="0" height="38" src="https://xxxxxx/cta_at_desktop.jpg" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; border: 0; display: block;" width="196" /></td>
</tr>
</tbody>
</table>
<!-- /#cta -->
</td>
</tr>
<tr>
<td id="footerContainer">
<table id="footerWrapper" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td id="footer" style="text-transform: none;" align="center">
<a href="http://xxxxxx" target="_blank">
<img src="https://xxxxxx/footer_logo.png" width="196" height="42" border="0" style="color: #ffffff; font-family: Verdana, sans-serif; font-size: 13px;" alt="xxxxxx"></a>
</td>
</tr></table>
<!-- /#hero -->
</td>
<!-- /#heroWrapper -->
</tr>
</tbody></table>
<!-- /#main --><table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
<td id="requiredFooterText">
This message was sent to [Contact.Email] by xxxxxx.<br><br>
xxxxxx<br>
xxxxxx<br>
xxxxxx<br>
xxxxxx<br><br>
We received your contact information from [Contact._source].<br><span style="color:#ffffff; text-decoration:underline;">Unsubscribe</span> from future email communications from xxxxxx.<br><br><br>
</td>
</tr></table>
<!-- /#requiredFooter -->
</td>
</tr></table>
<!-- /#mainWrapper --><style data="noinline">#media print{ #_t { background-image: url('https://ajucb1v6.emltrk.com/ajucb1v6?p&d=[Contact.Email]&t=[Campaign.Id]');}} div.OutlookMessageHeader {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} table.moz-email-headers-table {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} blockquote #_t {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} #MailContainerBody #_t {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')}</style>
<div id="_t"></div>
<img src="https://ajucb1v6.emltrk.com/ajucb1v6?d=[Contact.Email]&t=[Campaign.Id]" width="1" height="1" border="0">
</body>
</html>
All of the images/text have been removed to protect my client.
I'm just hoping its a stupid color/semicolon error or something, and not the 'magical padding' that Litmus has discussed over new additions to iOS9 Apple Mail.