Problem: Big margins/ padding in HTML E-Mails from sendhtml action

maxheartrate · June 27, 2022, 5:37pm

Hi everyone,

I am still working on my weekly OpenHAB e-mail report. I have overcome a couple of challenges but now I am lost with a formatting problem. I created a template with Beefree.io. I pasted the HTML code into my OpenHAB rule but the result is different from when I look at the HTML preview or send a test mail from Beefree.
When I send the e-mail from OpenHAB the margins or padding is huge. Way bigger than intended. I don’t know where the misinterpretation may be. It is the same in the entire e-mail.

This is the screenshot from the HTML preview with proper padding:

OpenHAB rule (the rule exceeds the character limit. I will post it in a reply)

This is the result I get from my OpenHAB rule on my mobile. As you can see the gaps are huge:

Interestingly, in my desktop e-mail client there is only a big white empty block before the content starts. The rest of the formatting looks ok.

Any ideas where the problem might be? Thank you and best regards to all, Max

maxheartrate · June 27, 2022, 5:47pm

This is the shortened rule. The original one contains more items. This is for testing. The dummy values will be replaced by item states.

rule "Mail"

when 
    Time cron "0 15 0 ? * SUN *" or

    then

    val mailActions = getActions("mail","mail:smtp:openhab")
    val subject ="Report"
    val message = new StringBuilder()
        logInfo ("Log Mailreport", "Mail creation started: Setting up StringBuilder.")

    message.append("
<!DOCTYPE html>
<html xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" lang=\"de-DE\">

<head>
	<title></title>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
	<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
	<!--[if !mso]><!-->
	<link href=\"https://fonts.googleapis.com/css?family=Droid+Serif\" rel=\"stylesheet\" type=\"text/css\">
	<link href=\"https://fonts.googleapis.com/css?family=Abril+Fatface\" rel=\"stylesheet\" type=\"text/css\">
	<!--<![endif]-->
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			padding: 0;
		}

		a[x-apple-data-detectors] {
			color: inherit !important;
			text-decoration: inherit !important;
		}

		#MessageViewBody a {
			color: inherit;
			text-decoration: none;
		}

		p {
			line-height: inherit
		}

		.desktop_hide,
		.desktop_hide table {
			mso-hide: all;
			display: none;
			max-height: 0px;
			overflow: hidden;
		}

		@media (max-width:700px) {

			.image_block img.big,
			.row-content {
				width: 100% !important;
			}

			.mobile_hide {
				display: none;
			}

			.stack .column {
				width: 100%;
				display: block;
			}

			.mobile_hide {
				min-height: 0;
				max-height: 0;
				max-width: 0;
				overflow: hidden;
				font-size: 0px;
			}

			.desktop_hide,
			.desktop_hide table {
				display: table !important;
				max-height: none !important;
			}

			.reverse {
				display: table;
				width: 100%;
			}

			.reverse .column.first {
				display: table-footer-group !important;
			}

			.reverse .column.last {
				display: table-header-group !important;
			}

			.row-10 td.column.first>table,
			.row-10 td.column.last>table {
				padding-left: 0;
				padding-right: 0;
			}

			.row-10 td.column.first .border,
			.row-10 td.column.last .border {
				border-top: 0;
				border-right: 0px;
				border-bottom: 0;
				border-left: 0;
			}
		}
	</style>
</head>

<body style=\"background-color: #b8e1f6; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;\"><div class=\"preheader\" style=\"display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;\">Wasserverbrauch: 9999 Liter, Strom: 9999 kWh, Gas: 9999m³</div>
	<table class=\"nl-container\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #b8e1f6;\">
		<tbody>
			<tr>
				<td>
					<table class=\"row row-1\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"padding-bottom:20px;padding-top:10px;width:100%;padding-right:0px;padding-left:0px;\">
																<div align=\"center\" style=\"line-height:10px\"><a href=\"www.example.com\" target=\"_blank\" style=\"outline:none\" tabindex=\"-1\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/openhab-classic.png\" style=\"display: block; height: auto; border: 0; width: 136px; max-width: 100%;\" width=\"136\" alt=\"Company Logo\" title=\"Company Logo\"></a></div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-2\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-position: center top;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 0px; padding-bottom: 0px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"width:100%;padding-right:0px;padding-left:0px;\">
																<div align=\"center\" style=\"line-height:10px\"><a href=\"www.example.com\" target=\"_blank\" style=\"outline:none\" tabindex=\"-1\"><img class=\"big\" src=\"https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6761/08bd485f-3aa2-4f51-b1d7-338ed3debb55.png\" style=\"display: block; height: auto; border: 0; width: 679px; max-width: 100%;\" width=\"679\" alt=\"clouds\" title=\"clouds\"></a></div>
															</td>
														</tr>
													</table>
													<table class=\"heading_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"padding-bottom:10px;text-align:center;width:100%;\">
																<h1 style=\"margin: 0; color: #e3f2ff; direction: ltr; font-family: 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 55px; font-weight: 400; letter-spacing: 1px; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;\"><span class=\"tinyMce-placeholder\">Wochenbericht</span></h1>
															</td>
														</tr>
													</table>
													<table class=\"paragraph_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td style=\"padding-bottom:40px;padding-left:20px;padding-right:20px;padding-top:10px;\">
																<div style=\"color:#e3f2ff;direction:ltr;font-family:'Droid Serif', Georgia, Times, 'Times New Roman', serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:150%;text-align:center;mso-line-height-alt:24px;\">
																	<p style=\"margin: 0;\">Hier kommt unsere wöchentliche Übersicht mit spannenden Informationen über uns und unser Haus.</p>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-3\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"spacer_block\" style=\"height:20px;line-height:20px;font-size:1px;\">&#8202;</div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-4\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"padding-top:10px;width:100%;padding-right:0px;padding-left:0px;\">
																<div align=\"center\" style=\"line-height:10px\"><a href=\"www.example.com\" target=\"_blank\" style=\"outline:none\" tabindex=\"-1\"><img src=\"https://d1oco4z2z1fhwp.cloudfront.net/templates/default/6761/17a8738e-2652-4bfb-bc6c-a7f3e3c1a208.png\" style=\"display: block; height: auto; border: 0; width: 170px; max-width: 100%;\" width=\"170\" alt=\"circle of people holding hands\" title=\"circle of people holding hands\"></a></div>
															</td>
														</tr>
													</table>
													<table class=\"heading_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"text-align:center;width:100%;padding-top:30px;\">
																<h1 style=\"margin: 0; color: #e3f2ff; direction: ltr; font-family: 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: normal; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;\"><span class=\"tinyMce-placeholder\">Wer war wie lange zu Hause?</span></h1>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-5\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #b8e1f6;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"width:100%;padding-right:0px;padding-left:0px;padding-top:5px;\">
																<div align=\"center\" style=\"line-height:10px\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/pic-carsten.png\" style=\"display: block; height: auto; border: 0; width: 85px; max-width: 100%;\" width=\"85\" alt=\"I'm an image\" title=\"I'm an image\"></div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><span style=\"color:#ffffff;\"><em><strong>P1</strong></em></span></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td style=\"padding-bottom:15px;padding-left:10px;padding-right:10px;padding-top:10px;\">
																<div style=\"font-family: Georgia, 'Times New Roman', serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 14px; text-align: center;\"><span style=\"color:#ffffff;\">99 Tage 99 Std. 99 Min.</span></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
												</td>
												<td class=\"column column-2\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"width:100%;padding-right:0px;padding-left:0px;padding-top:5px;\">
																<div align=\"center\" style=\"line-height:10px\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/pic-tina.png\" style=\"display: block; height: auto; border: 0; width: 85px; max-width: 100%;\" width=\"85\" alt=\"I'm an image\" title=\"I'm an image\"></div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><span style=\"color:#ffffff;\"><em><strong>P2</strong></em></span></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td style=\"padding-bottom:15px;padding-left:10px;padding-right:10px;padding-top:10px;\">
																<div style=\"font-family: Georgia, 'Times New Roman', serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 14px; text-align: center;\"><span style=\"color:#ffffff;\">99 Tage 99 Std. 99 Min.</span></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-6\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fffff; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"width:100%;padding-right:0px;padding-left:0px;\">
																<div align=\"center\" style=\"line-height:10px\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/very-cloudy-clouds-sun-day-cloudy-1265202.jpg\" style=\"display: block; height: auto; border: 0; width: 136px; max-width: 100%;\" width=\"136\" alt=\"I'm an image\" title=\"I'm an image\"></div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><em><strong>WWW - WIE WAR'S WETTER?<br></strong></em></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2;\">
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><strong>Temperaturen</strong></p>
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\">Die Höchsttemperatur betrug 99.99°C, gemessen am Montag um 99:99 Uhr. Die niedrigste Temperatur war 99.99°C am Montag um 99:99 Uhr. Die Durchschnittstemperatur lag bei 99.99°C.<em><strong><br></strong></em></p>
																		<p style=\"margin: 0; font-size: 16px; text-align: center; mso-line-height-alt: 14.399999999999999px;\">&nbsp;</p>
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><strong>Wind</strong></p>
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\">Die maximale Windgeschwindigkeit lag bei 99.99m/s, am Montag um 99:99 Uhr. Die durschnittliche Windgeschwindigkeit war 99.99m/s.</p>
																		<p style=\"margin: 0; font-size: 16px; text-align: center; mso-line-height-alt: 14.399999999999999px;\">&nbsp;</p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-7\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"spacer_block\" style=\"height:20px;line-height:20px;font-size:1px;\">&#8202;</div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-8\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"heading_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"text-align:center;width:100%;padding-top:30px;\">
																<h1 style=\"margin: 0; color: #e3f2ff; direction: ltr; font-family: 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: normal; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;\"><span class=\"tinyMce-placeholder\">Was haben wir verbraucht?</span></h1>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-9\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"width:100%;padding-right:0px;padding-left:0px;padding-top:30px;padding-bottom:30px;\">
																<div align=\"center\" style=\"line-height:10px\"><a href=\"www.example.com\" target=\"_blank\" style=\"outline:none\" tabindex=\"-1\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/wassertropfen.png\" style=\"display: block; height: auto; border: 0; width: 204px; max-width: 100%;\" width=\"204\" alt=\"water bottle\" title=\"water bottle\"></a></div>
															</td>
														</tr>
													</table>
												</td>
												<td class=\"column column-2\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"heading_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
														<tr>
															<td style=\"padding-left:20px;padding-top:15px;text-align:center;width:100%;\">
																<h1 style=\"margin: 0; color: #e3f2ff; direction: ltr; font-family: 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: normal; line-height: 120%; text-align: left; margin-top: 0; margin-bottom: 0;\"><span class=\"tinyMce-placeholder\">Wasser</span></h1>
															</td>
														</tr>
													</table>
													<table class=\"paragraph_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td style=\"padding-bottom:10px;padding-left:20px;padding-right:45px;padding-top:10px;\">
																<div style=\"color:#e3f2ff;direction:ltr;font-family:'Droid Serif', Georgia, Times, 'Times New Roman', serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:150%;text-align:left;mso-line-height-alt:24px;\">
																	<p style=\"margin: 0; margin-bottom: 16px;\">In der vergangenen Woche haben wir <strong>9999 ℓ Wasser (99%) </strong>verbraucht. Im Haus waren es 9999 ℓ (99%) und im Garten 9999 ℓ (99%).</p>
																	<p style=\"margin: 0;\">Unser Wasserverbrauch im Vergleich zum Durchschnitt: <strong>99%.</strong></p>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-10\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #5091c4; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr class=\"reverse\">
												<td class=\"column column-1 first\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"border\">
														<table class=\"heading_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
															<tr>
																<td style=\"padding-left:20px;padding-top:15px;text-align:center;width:100%;\">
																	<h1 style=\"margin: 0; color: #e3f2ff; direction: ltr; font-family: 'Abril Fatface', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: normal; line-height: 120%; text-align: left; margin-top: 0; margin-bottom: 0;\"><span class=\"tinyMce-placeholder\">Strom</span></h1>
																</td>
															</tr>
														</table>
														<table class=\"paragraph_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
															<tr>
																<td style=\"padding-bottom:10px;padding-left:20px;padding-right:45px;padding-top:10px;\">
																	<div style=\"color:#e3f2ff;direction:ltr;font-family:'Droid Serif', Georgia, Times, 'Times New Roman', serif;font-size:16px;font-weight:400;letter-spacing:0px;line-height:150%;text-align:left;mso-line-height-alt:24px;\">
																		<p style=\"margin: 0; margin-bottom: 16px;\">In der vergangenen Woche haben wir <strong>9999 kWh Strom (99%) </strong>verbraucht und wir haben 9999 kWh (99%) an Überschüssen eingespeist.</p>
																		<p style=\"margin: 0;\">Unser Stromverbrauch im Vergleich zum Durchschnitt: <strong>99%.</strong></p>
																	</div>
																</td>
															</tr>
														</table>
													</div>
												</td>
												<td class=\"column column-2 last\" width=\"50%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"border\">
														<table class=\"image_block\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
															<tr>
																<td style=\"width:100%;padding-right:0px;padding-left:0px;padding-top:30px;\">
																	<div align=\"center\" style=\"line-height:10px\"><a href=\"www.example.com\" target=\"_blank\" style=\"outline:none\" tabindex=\"-1\"><img src=\"https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/BeeProAgency/825945_809915/strom.png\" style=\"display: block; height: auto; border: 0; width: 204px; max-width: 100%;\" width=\"204\" alt=\"reusable bag\" title=\"reusable bag\"></a></div>
																</td>
															</tr>
														</table>
													</div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-11\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fffff; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"spacer_block\" style=\"height:25px;line-height:25px;font-size:1px;\">&#8202;</div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-12\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<div class=\"spacer_block\" style=\"height:20px;line-height:20px;font-size:1px;\">&#8202;</div>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class=\"row row-13\" align=\"center\" width=\"100%\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt;\">
						<tbody>
							<tr>
								<td>
									<table class=\"row-content stack\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #b8b8b8; color: #000000; width: 680px;\" width=\"680\">
										<tbody>
											<tr>
												<td class=\"column column-1\" width=\"100%\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding-top: 5px; padding-bottom: 5px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;\">
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;\">
																		<p style=\"margin: 0; font-size: 16px; text-align: center;\"><em><strong>ZÄHLERSTÄNDE</strong></em></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
													<table class=\"text_block\" width=\"100%\" border=\"0\" cellpadding=\"10\" cellspacing=\"0\" role=\"presentation\" style=\"mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;\">
														<tr>
															<td>
																<div style=\"font-family: sans-serif\">
																	<div class=\"txtTinyMce-wrapper\" style=\"font-size: 12px; mso-line-height-alt: 14.399999999999999px; color: #555555; line-height: 1.2; font-family: Arial, Helvetica Neue, Helvetica, sans-serif;\">
																		<p style=\"margin: 0; text-align: center; font-size: 14px;\"><span style=\"font-size:14px;\">Wasser Gesamt: 9999 m³, Bewässerung: 9999 m³</span></p>
																		<p style=\"margin: 0; text-align: center; font-size: 14px;\"><span style=\"font-size:14px;\">Strom: 9999 kWh, Einspeisung: 9999 kWh</span></p>
																		<p style=\"margin: 0; text-align: center; font-size: 14px;\"><span style=\"font-size:14px;\">Gas: 9999 m³</span></p>
																	</div>
																</div>
															</td>
														</tr>
													</table>
												</td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table><!-- End -->
</body>

</html>

")

    mailActions.sendHtmlMail("XXXXX@gmail.com", subject, message.toString)
    logInfo ("Log Mailreport", "Mail creation completed. Rule finished.")
end

maxheartrate · June 28, 2022, 9:22pm

Do any of the usual OH geniuses have an idea?
@rlkoshak (sorry, pointed to wrong thread at first) @rossko57 @Udo_Hartmann

Or do you know someone who might be able to help with the HTML issue?

rlkoshak · June 28, 2022, 9:28pm

All I can suggest is to look at the raw email source sent from the service and compare it line for line with the raw email source sent from openHAB and find the difference. From there maybe it will be apparent why it looks different.

Ultimately this really isn’t an OH issue as the binding is sending the email and sending an HTML email just like you’ve asked.

maxheartrate · June 29, 2022, 11:38am

Good suggestion, @rlkoshak. I will try that.
I was doing trial and error by removing parts in the rule but it‘s a better idea to check if anything gets modified when the e-mail has been received.
Best, Max

Wolfgang_S · July 1, 2022, 6:02pm

That means you use two different clients to view the received mail ? While on one it’s good but bad on the other one ?
I assume you use Microsoft Office on your desktop then the reason could be outlook specific tags in the code ( see Outlook conditional CSS - Stacks ).

maxheartrate · July 4, 2022, 6:51pm

Hi @Wolfgang_S , I will try to explain:

I created the e-mail with beefree. When I send a test mail from there, everything looks great: On desktop and on mobile. When I export the code to VS Code, the HTML Preview looks fine, too.

The problems arise when I paste the HTML into my OH rule. The process involves replacing all " in the original HTML with " escapes. When I execute the rule, I get the margin problem. On desktop, there is just a big gap at the top and then the e-mail looks fine. On mobile it looks like in the screenshots above. With the big margins between every single element.

EDIT: I am wondering whether I need to escape more characters in the pasted HTML. Is there a list of characters somewhere? E.g., do I need to escape the exclamation mark?

Do you have an idea how to fix this? Best, Max

Wolfgang_S · July 4, 2022, 9:07pm

Double quotes need to be escaped because they are used as starting and endpoint for message.append. It is not necessary to escape exclamation marks.
Can you export/save the html code on the android client to compare it against the original ?

maxheartrate · July 6, 2022, 1:26pm

I can try to export the code but I don’t know how to upload it here because I cannot upload HTML or ZIP files.

Wolfgang_S · July 6, 2022, 4:48pm

rename the html file to .txt and let that know everybody in your post.
Alternatively you can use a free hoster or e.g. pastebin to upload your ‘code’.

maxheartrate · July 8, 2022, 7:23pm

Thank you for the advise, @Wolfgang_S.

I have now created four files and renamed all to txt:

openhab-email-report-rule: This is the OpenHAB rules file. Correct suffix: .rules
openhab-report-html-reported: This is the original HTML code which is rendered by beefree. I pasted this code into my rule and replaced all " with " and ’ with '. Correct suffix: .html
mail-from-befreeio-sourcecode: This is the HTML sourcecode of a test email sent straight from beefree. It is rendered correctly on desktop and mobile Correct suffix: .html
mail-from-openhab-sourcecode: This is the HTML sourcecode of the received mail from the OpenHAB rule. Correct suffix: .html

I wonder if you can spot the differences. Thank you very much!

mail-from-openhab-sourcecode.txt (97.6 KB)
openhab-email-report-rule.txt (36.0 KB)
mail-from-befreeio-sourcecode.txt (37.5 KB)
openhab-report-html-exported.txt (34.0 KB)

Wolfgang_S · July 8, 2022, 9:30pm

mail-from-openhab-sourcecode.txt contains a set of additional tags compared to that one from befreeio.

diff modified-openhab original-openhab
10c10,13
< <meta http-equiv="content-type" content="text/html; "></head><body style="background-color: #b8e1f6; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;"><div class="moz-text-html" lang="x-unicode">
---
> <meta http-equiv="content-type" content="text/html; "></head><body style="background-color: #b8e1f6; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;"><div class="moz-text-html" lang="x-unicode"><pre>
> 
> 
> 
40a44
> <div class="preheader" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Wasserverbrauch: 9999 Liter, Strom: 9999 kWh, Gas: 9999m³</div>
485a490,496
> 
> 
> 
> 
> 
> 
> </pre>

Question is where do these tags come from …

End of the rule:

                </tbody>
        </table><!-- End -->
</body>

</html>



")

End of the mail generated by the rule:

</table><!-- End -->
</body>

</html>



</pre></body></html>

So it looks like the rule ( message.append ) on it’s own adds tags pre, body, html surounding your mail content.
I would try the following:

remove the empty rows in front of the mail body and behind the mail body; this should reduce the amount of empty rows before and after your mail content
try to remove your html and body tag before the content and after the content of your mail; assumed message.append will add these tags on it’s own it would work

At least a test is required to test the theory.

maxheartrate · July 10, 2022, 11:08am

Interesting observations. Thank you.
The big white margin on top of the e-mail on desktop actually got a bit smaller but it is still there. I will check if I can remove more from the rule. On mobile I still have the big padding around each content block.
As for the and : I removed them from my rule but I can’t remove the opening tags from the beginning of the mail as they contain definitions. Didn’t result in any change on the rendered e-mail though.

Wolfgang_S · July 10, 2022, 11:35am

I extracted the html mail content from your posted examples.
After removing the double entries body/html resp. the pre tag I compared the rendered pages using firefox on a desktop and they both looked the same.
In case you need to keep the opening tags due to header definition then this most probably still has the same affect as opening and closing tags would be there ( rendering software sometimes fills missing tags ).
The only idea I have left then would be to use an other way to generate this kind of html mails like e.g. using the exec-binding or executeCommandLine.
E.g. you can use a html template file that contains variables like XX_MyVariableToReplace_XX that are to be replaced. Then generate that page with replaced values ( that can be done by using script or sed commands ) and send that from the ‘command line’. I use that in my company to send out announcements to users.

maxheartrate · July 10, 2022, 11:47am

Hi @Wolfgang_S,
that sounds like a great idea. Is there any documentation which could help me with this? I have no experience with the exec-binding.
Thank you, Max

Wolfgang_S · July 13, 2022, 7:16pm

Attached is a tar file
remove the extension .txt
save it into a separate directory
extract the files ( tar xfv example-mail-from-python.tar )
this is an example from an other thread where an other one asked for similar support and I created a python script to create a html mail with embedded pictures
template.html contains the text of the mail; this file needs to be generated by your rule; at the end the file needs to be saved
in next step run the python script from your rule to send the mail ( a few lines need to be modified to adapt the username / password to your needs )

example-mail-from-python.tar.txt (40 KB)

Please let me know if you have any question.

maxheartrate · July 31, 2022, 5:32pm

Thank you @wolfgang_s for the files. I am on vacation but will try to try everything when I come back.

Best, Max

tomE · November 14, 2022, 11:13am

Don’t know if it still helps but there exists a simple work around.
As wolfgang_s already mentrioned sendhtml warps your html code into
html,body,pr… /html,/body/pre tags. This may produce unpredictable results depending on which tags you are using in your own html code.
The workaround:
Use ‘sendMail’ instead of ‘sendHtmlMail’. This leaves your code untouched. However with sendMail the Content-Type in the mail header is set to ‘text/plain’, so the receiving mail application will display plain text only. Fortunately the binding allows you to set your own header, so the following code gives the expected results:

val mailActions = getActions("mail","mail:smtp:sampleserver")
mailActions.addHeader("Content-Type", "text/html; charset=utf-8")
mailActions.sendMail("mail@example.com", "Test subject", HTML_content)

You can easily check the result if you display the message source code in your mail application.