0
Ich erstelle eine HTML eMail und es funktioniert gut über die meisten Klienten. Mein Design ist abhängig von dem Bild, mit dem die Mail beginnt. Es muss ganz oben sein. In Outlook jedoch zeigt die Mail einen Rahmen um die gesamte Mail an. Oben ist es wie 20px und an den Seiten etwa 10px. Hier ist mein Code so weit:Bild oben auf der Post, das zusätzlichen Raum zeigt, um in der Aussicht zu übersteigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<!-- Web Font/@font-face : BEGIN -->
<!--[if mso]>
<style>
* {font-family: Arial, Verdana, sans-serif !important;}
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,300' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<!-- Web Font/@font-face : END -->
<style type="text/css">
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin:0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
Margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
img {
-ms-interpolation-mode:bicubic;
}
.yshortcuts a {
border-bottom: none !important;
}
.mobile-link--footer a,
a[x-apple-data-detectors] {
color:inherit !important;
text-decoration: underline !important;
}
</style>
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
Margin-left: auto !important;
Margin-right: auto !important;
}
/* And center justify these ones. */
.fluid-centered {
Margin-left: auto !important;
Margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
Margin-left: auto !important;
Margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
</head>
<body width="100%" bgcolor="28bffe" style="margin: 0; padding: 0;">
<div style="background-color:#28bffe;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" size="100%,35%" src="images/bg.jpg" color="#28bffe"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" style="border-collapse:collapse; margin:0; padding:0;">
<tr><td valign="top" align="left" background="images/bg.jpg" style="background-size: 100% auto; background-repeat: no-repeat; ">
<center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Title
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Main Body Container for Snippets: Begin -->
<div style="max-width: 600px; margin: auto;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="" width="100%" style="max-width: 600px;">
<tr>
<td style="text-align: center; margin:0; padding: 0; line-height: 0; font-size: 0;">
<img src="images/hero.gif" width="600" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 600px;outline:none; line-height: 0; font-size: 0; margin:0; padding: 0;">
</td>
</tr>
<tr>
<td style="padding: 25px 0; text-align: center; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 18px; mso-height-rule: exactly; line-height: 23px; color: #000000; font-weight:normal;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatiopbus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</td>
</tr>
<tr>
<td style="text-align: center;">
<img src="images/slogan.png" width="600" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 600px;outline:none;">
</td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!-- Main Body Container for Snippets: END -->
<!-- Main Body Container for Snippets: Begin -->
<div style=" margin: auto;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="" width="100%" >
<tr style="background-color: #1a1a1a;">
<td style="text-align: center;">
<img src="images/pier.jpg" width="276" height="" alt="Whoop" border="0" align="center" style="width: 100%; max-width: 276px;outline:none; padding: 10px 0;">
</td>
</tr>
<tr style="background-color: #1a1a1a;">
<td style="text-align: center; font-family: 'Open Sans', Arial, Verdana, sans-serif; font-size: 12px; mso-height-rule: exactly; line-height: 15px; font-weight:normal;">
<br><webversion style="text-decoration: none; color: #8a8a8a;">WEBVERSION LINK</webversion><br>
<br><unsubscribe style="text-decoration: none; color: #8a8a8a;">UNSUB LINK</unsubscribe><br><br><br><br>
</td>
</tr>
</table>
<!-- Email Body : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!-- Main Body Container for Snippets: END -->
</center>
</td></tr>
</table>
</div>
</body>
Kennt jemand dieses Problem und wissen, wie dieses Problem beheben? Das Problem ist in Outlook 2007,10,11.
Danke, ich habe versucht magin: 0; und Auffüllen: 0; an verschiedenen Orten. Der Newsletter ist nicht so lang, also habe ich die ganze Sache eingefügt. Haben Sie das gleiche Problem im Allgemeinen? Ich habe es in allen meinen E-Mails, was keine große Sache war, da in den meisten Mails der Hintergrund img nicht so wichtig ist. Aber mit dieser Email kombiniere ich den Heroimg mit dem Hintergrund, daher ist die Positionierung sehr wichtig. – Niqql