Ich baue eine flüssige hybride E-Mail und aus irgendeinem Grund expandiert diese einzelne Spalte über meinen 600px Container hinaus für Outlook 2007+. Wenn ich es in Litmus teste, ist alles in Ordnung, aber wenn ich es in Outlook 2010 sehe, habe ich ein paar Probleme. Es gibt 1px Abstand unter dem Header-Bild und die einzelne Spalte (mit dem Text) erstreckt sich über 600px hinaus. Ich habe versucht die üblichen Verdächtigen (Anzeige: Block auf IMG, Valign Bottom), aber kein Glück.Outlook 2007+ zusätzlicher Abstand in einer einzelnen Spaltenreihe
Bitte beachten Sie, dass ich eine bedingte Header-Bild haben, das für Outlook angezeigt wird 2007+.
Irgendwelche Ideen? Danke im Voraus!
Hier ist der Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
.legal {padding-left: 20px;}
.footer {display: none !important;}
</style>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.header {display: none;}
</style>
<![endif]-->
<style type="text/css">
.sellPoints {
font-size: 10px;
padding-bottom: 5px;
padding-left: 42px;
}
.mainPoints {
font-size: 12px;
}
body {
margin: 0 !important;
padding: 0;
background-color: #ffffff;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #333333;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
margin: 0 auto;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
}
/*Full width image*/
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
/*<!-- Single column row layout -->*/
.inner {
padding: 10px;
}
p {
Margin: 0;
}
a {
color: #ee6a56;
text-decoration: underline;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}
/*Double column row layout*/
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.contents {
width: 100%;
}
.two-column .contents {
font-size: 14px;
text-align: left;
}
.two-column img {
width: 100%;
max-width: 300px;
height: auto;
}
.two-column .text {
padding-top: 10px;
}
</style>
<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td>
<!-- Two column row layout -->
<!-- Full width banner image -->
<!--[if gte mso 9]>
<table class="outer" align="center">
<tr>
<td class="full-width-image" valign="bottom">
<img style="display: block; width: 600px !important;" src="http://www.thedognamer.com/wp-content/uploads/2015/07/seinfeld-dog-names.png" width="600" alt="" />
</td>
</tr>
</table>
<![endif]-->
<!-- End Full width banner image -->
<!--[if !mso]><!-- -->
<tr>
<td class="two-column header" bgcolor="#83bae6" style="background-color: #83bae6;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="contents" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<img style="display: block;" src="https://s-media-cache-ak0.pinimg.com/736x/03/a8/68/03a868689a6c3eb81767e18ee246ebfe.jpg" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="contents" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<img style="display: block;" src="https://s-media-cache-ak0.pinimg.com/736x/03/a8/68/03a868689a6c3eb81767e18ee246ebfe.jpg" alt="" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!--<![endif]-->
<!-- End Two column row layout -->
<!-- Single column row layout -->
<tr>
<td class="one-column">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="contents" bgcolor="#5477b9" style="background-color: #5477b9;text-align: center;color: #ffffff;padding-top: 8px; padding-bottom: 0; Margin-bottom: 8px;">
<p class="h1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient mo</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Single column row layout -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
Litmus Link funktioniert nicht, können Sie bitte ein Schnipsel des Codes posten. –
Ich habe den Beitrag aktualisiert, um den Code einzuschließen. Nicht sicher, warum es in zwei Teile (ich entschuldige mich im Voraus). – brando