it-swarm.com.de

Tabellen mit 100% Breite funktionieren in Google Mail Android nicht

Ich versuche, eine reaktionsfähige E-Mail zu erstellen - sie funktioniert eigentlich ziemlich gut, abgesehen von einigen kleinen Teilen, die in Google Mail für Android nicht zusammenarbeiten.

Ich habe diese wirklich einfachen schwarzen Streifen, die als dekoratives Element oben in der E-Mail stehen:

<table width="100%" cellpadding="0" cellspacing="0" align="center" valign="top">
    <tr><td width="100%" height="11" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="2" bgcolor="#FFFFFF"></td></tr>
    <tr><td width="100%" height="1" bgcolor="#000000"></td></tr>
    <tr><td width="100%" height="30" bgcolor="#FFFFFF"></td></tr>
</table>

Sie zeigen jedoch nichts weiter als einen winzigen Streifen aus Schwarz und Weiß an, der einem ultradünnen Ausrufezeichen in der Gmail Android-App ähnelt.

Ebenso gibt es eine Fußzeile, die sich nicht über die gesamte Breite der E-Mail erstreckt:

<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
    <tr>
        <td>

        <table width="650" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">
            <tr>
                <td align="right" class="footer">
                    <img src="images/footer.png" />
                </td>
            </tr>
        </table>

        </td>
    </tr>
</table>

Irgendwelche Vorschläge, wie diese über die gesamte Breite der E-Mail erfolgen können?

15
nebulousecho

Wenn Sie keine Lösung gefunden haben, versuchen Sie es 

style = "width: 100%! important" gefällt 

 <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000" style="width:100%!important">

Gmail entfernt gerne die meisten CSS, aber wenn Sie ein Label hinzufügen, wird es die meiste Zeit bleiben. 

42
JoePhillips

Erinnern Sie sich also an Gmail, dass 100% 100% bedeutet, indem Sie min-width hinzufügen: 100% zu unserer <Tabelle>.

Quelle

11
insulaner

Nach ausgiebigen Tests funktioniert die Lösung wie folgt für alle vertikalen Abstandsprobleme in allen E-Mail-Clients (verfügbar bei Litmus). Google Mail-App auf Andriod.

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100% !important;">
    <tr>
        <td bgcolor="#00a0cc" height="25" style="background:#00a0cc;height:25px;line-height:0;font-size:0;">&nbsp;<br /></td>
    </tr>
</table>

Der Schlüsselpunkt ist, width:100% !important auf die Tabelle anzuwenden. Die Anwendung auf td..__ funktioniert nicht. Dies ist auch die beste Lösung zum Ersetzen vertikaler Abstandshalterbilder.

2
Mark

Ich bin nicht vertraut mit dem Erstellen von Clients/Sites/etc für alles, was nicht für den PC gedacht ist. Daher bin ich mir nicht sicher, ob dies funktioniert oder nicht. Versuchen Sie es jedoch.

<center>
<h1 style="color:#888888;">Android Client Header</h1>
<p>Demonstration</p>
</center>
<hr color="#000000" style="height:11px;">
<hr color="#FF0000" style="height:2px;">
<hr color="#000000" style="height:1px;">
<hr color="#FF0000" style="height:30px;">

<h3 style="color:#0070ff;">Content 1</h3>
<p color="#808080">E-mail Here</p>
<hr color="#000000">
<center>
<h1 style="color:#db880f;text-size:10px;">Android Client Footer</h1>
<p style="color:#888888;">Demonstration</p>
</center>

Auch wenn Sie die Elementfunktion "Tabelle" verlieren, handelt es sich hier um ein Beispiel, bei dem ich mein Bestes gegeben habe, um Ihre Farb- und Größeneinstellungen für die Liniendekorationen anzupassen.

0
user3799724