html in emails

seoxsem · Beitrag **seoxsem** » 21.08.2008, 18:41 **html in emails**

hallo,

ich kämpfe grad seit neuestem mit newsletter layouts und templates und versuche alles mögliche zu beachten, damit bei vielen mail-clients gleich aussieht etc.

ich habe mal eine einfache sache herausgegriffen wo ich momentan dran verzweifel:

Code: Alles auswählen

<table border="0" cellspacing="0" style="border&#58; #6e6e6e 1px solid">
	<tbody>
	<tr style="background-color&#58; #ff0099">
		<td>
		a		</td>		<td>
		&nbsp;b		</td>	</tr>	<tr>
		<td>
		&nbsp;c		</td>		<td>
		&nbsp;d		</td>	</tr>	</tbody></table>

normal, also in jedem browser und selbst im gmail-client hat man die erste zeile farbig und rundrum 1px border, ohne zwischenraum zwischen border und farbiger hintergrund.

nur im outlook 2007 email client macht er da nen zwischenraum als ob es cellspacing=1 wäre.

gibts da irgendeine lösung für oder ne andere art die darstellung so hinzubekommen?

bjoerntantau · **bjoerntantau** » 21.08.2008, 19:03 **html in emails**

...das CSS ist nicht valide, es fehlt ein ";" jeweils hinter "solid" und "#ff0099". Daran wird's aber kaum liegen. Vermutlich eine Macke von Outlo - stammt ja schließlich von Microsoft

Ich kenne diese Problemation nur von den IE-Browsern. Dort kommt es auch teilweise vor und kann (im horizontalen Bereich) durch transparente 1x1-Pixel-Grafiken gelöst werden...

Lima · Beitrag **Lima** » 22.08.2008, 12:33 **html in emails**

tameco hat geschrieben:...das CSS ist nicht valide, es fehlt ein ";" jeweils hinter "solid" und "#ff0099". Daran wird's aber kaum liegen. Vermutlich eine Macke von Outlo - stammt ja schließlich von Microsoft

Das ";" ist lediglich ein Trennzeichen. Somit kann es ohne Probleme weggelassen werden

.

Zu dem Problem: Vielleicht helfen ja diese Angaben weiter: https://www.email-standards.org/clients ... look-2007/

Loptr · Beitrag **Loptr** » 22.08.2008, 13:54 **html in emails**

border: #6e6e6e 1px solid -> ist valide

kann man auch so schreiben (brauch halt nur mehr zeichen)

border-color: #6e6e6e; border-width:1px; border-style: solid;

Die Kurzformen kannst auch in font, padding, margin, etc. verwenden.

Das dürfte also nicht die Auswirkung bei Outlook 2007 verursachen. Hast mal probiert ohne CSS zu arbeiten und dann mal angeschaut :

<table border="1px" bordercolor="#6e6e6e">

???

PS: versuch mal, nicht nur cellspacing="0" sondern auch cellpadding="0" zu schreiben.

Mamphil · Beitrag **Mamphil** » 22.08.2008, 14:03 **html in emails**

Dann aber bitte richtig

Code: Alles auswählen

<table border="1" bordercolor="#6e6e6e">

Loptr · Beitrag **Loptr** » 22.08.2008, 14:17 **html in emails**

...dann aber richtig richtig

Code: Alles auswählen

<table border="1" bgcolor="#6e6e6e">

https://de.selfhtml.org/navigation/html.htm#tabellen

BTW: meines Erachtens sollte man mit Einheiten arbeiten. Könnte ja auch mal ein Browser meinen, nicht die 1 als px zu interpretieren sondern als em oder pt oder %

... bei 50(px || pt || em || %) hast dann Probleme

@seoxsem Bitte Report wenn und wie du es hin gebogen hast. Vllt kann das auch anderen Nutzern helfen

seoxsem · Beitrag **seoxsem** » 22.08.2008, 14:20 **html in emails**

also irgendwie geht nichts von dem hier vorgeschlagenen und ich weiss nicht warum. die ganze tabelle mit nem rahmen und hintergrundfarbe geht, sobald ich die hintergrundfarbe im TR oder TD setze gibt sin outlook nen abstand zum äußeren rahmen. spacing und padding der tabelle natürlich auf null.

Loptr · Beitrag **Loptr** » 22.08.2008, 14:36 **html in emails**

hm.. ich kann mich erinnern, dass ein IE mal Probleme mit nem Zeilenumbruch im td hatte. Im FF sahs gut aus, im IE hat er dann immer so ne Art padding rein geschmissen. Versuch erstmal den tbody raus zu nehmen (is sowieso unnötig selbst lt. W3C) und dann alle whitespaces zu entfernen. Also komplett hintereinander geschrieben:

Code: Alles auswählen

<table border="0" cellspacing="0" style="border&#58; #6e6e6e 1px solid"><tr style="background-color&#58; #ff0099"><td>&nbsp;a</td><td>&nbsp;b</td></tr><tr><td>&nbsp;c</td><td>&nbsp;d</td></tr></table>

Edit: ODER (wenn überhaupt möglich) arbeite mit div ... das könnt das Problem auch lösen

Edit2: Kannst ma nen Screeny machen?

Mamphil · Beitrag **Mamphil** » 22.08.2008, 16:29 **html in emails**

Loptr hat geschrieben:...dann aber richtig richtig

Bordercolor ist aber etwas anderes als b[ack]g[round]color

Aber natürlich hast du recht damit, dass bordercolor kein offizielles Attribut ist...

Mork vom Ork · **Mork vom Ork** » 22.08.2008, 18:44 **html in emails**

tameco hat geschrieben:...das CSS ist nicht valide, es fehlt ein ";" jeweils hinter "solid" und "#ff0099".

Die CSS-Angabe ist vollkommen korrekt. Attributparameter werden mit einem Leerzeichen getrennt, nicht mit einem Semikolon. Das Semikolon trennt Attribute voneinander.

Lima hat geschrieben:sobald ich die hintergrundfarbe im TR oder TD setze gibt sin outlook nen abstand zum äußeren rahmen

Versuche, dort, wo du die Hintergrundfarbe setzt, zusätzlich padding:0, margin:0 und/oder border:0 hinzuzufügen.

Oder baue den HTML-Code anders auf.

Davon unabhängig: Mit dem Outlook-Dreck solltest du dich nicht allzu sehr rumärgern.

Cognac · Beitrag **Cognac** » 21.03.2014, 02:59 **html in emails**

Ich habe ein ähnliches Problem, kann mir vielleicht jemand helfen?

Mein Code:

Code: Alles auswählen

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#B10909" text="#000000" style="background-color&#58;#FFF;">

<table cellpadding="0" cellspacing="0" border="0" width="600" style="table-layout&#58;fixed;background-color&#58;#FFF;color&#58;#000;font-family&#58;Arial, Helvetica, sans-serif;font-size&#58;12px;">
<tr>
	<td style="background-color&#58;#FFF">
	<table cellpadding="0" cellspacing="0" border="0" width="600" style="table-layout&#58;fixed;">
		<colgroup>
			<col width="88">
			<col width="76">
			<col width="67">
			<col width="59">
			<col width="64">
			<col width="123">
			<col width="123">
		</colgroup>

		<!-- Top-Menu -->
      <tr>
         <td colspan="7"><img src="http&#58;//www.domain.de/hintergrund.jpg" width="600" height="161" alt="Header-Grafik" border="0" style="display&#58;block"></td>
      </tr>
      <tr>
         <td align="left" valign="top">
			 	<img src="http&#58;//www.domain.de/grafikx.jpg" width="88" height="26" alt="text" border="0" style="display&#58;block"></td>
         <td align="left" valign="top"><a href="http&#58;//www.domain.de" target="_blank">
				<img src="http&#58;//www.domain.de/grafikx.jpg" width="76" height="26" alt="text" border="0" style="display&#58;block"></a></td>
         <td align="left" valign="top"><a href="http&#58;//www.domain.de" target="_blank">
				<img src="http&#58;//www.domain.de/grafikx.jpg" width="67" height="26" alt="text" border="0" style="display&#58;block"></a></td>
         <td colspan="2" align="left" valign="top"><a href="http&#58;//www.domain.de" target="_blank">
				<img src="http&#58;//www.domain.de/grafikx.jpg" width="123" height="26" alt="text" border="0" style="display&#58;block"></a></td>
         <td align="left" valign="top"><a href="http&#58;//www.domain.de" target="_blank">
				<img src="http&#58;//www.domain.de/grafikx.jpg" width="123" height="26" alt="text" border="0" style="display&#58;block"></a></td>
         <td align="left" valign="top"><a href="http&#58;//www.domain.de" target="_blank">
				<img src="http&#58;//www.domain.de/grafikx.jpg" width="123" height="26" alt="text" border="0" style="display&#58;block"></a></td>
      </tr>

usw.

Dabei entsprechen die Bilder auch jeweils den angegebenen Höhen und Breiten exakt. Leider werden die Grafiken im Top-Menü (2.Tabellenzeile im inneren Table) mit großen Abständenen voneinander dargestellt. In Yahoo und GMail sowie in allen Browsern sieht es sauber aus, nur beim E-Mail Programm des Kunden ist es so wie beschrieben.

Cognac · Beitrag **Cognac** » 27.03.2014, 20:06 **html in emails**

Keiner eine Ahnung?

R. Kulka · **R. Kulka** » 28.03.2014, 00:19 **html in emails**

Wie wäre es mit gestapelten & verschachtelten Tabellen anstelle von colspans, rowspans und dem Verzicht auf "Postfach-Exoten" wie table-layout und colgroup?