Archief - Gmail geeft spaces in html mail

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
N

Natsu

Legacy Member
Hey all,

moet voor men werk een html mailing maken, maar ben zelf niet echt goed bekend meer met html ( buiten een beetje basis kennis )
Na lang googlen en alles beetje uitzoeken werkt men mailing en wordt ze op de meeste plaatsen ook goed weergegeven. Echter in gmail komt men layout niet goed door. Per "sectie" voegt hij een spatie/lijn tussen.

voorbeeld :
http://users.telenet.be/Senna_/gmail.jpg

De code zal waarschijnlijk nog wel wat beter kunnen enzo, maar zoals ik al zei, ben een html noob :p



Code: 
<html>
<head>
	<style type="text/css">
     img { display: block; }
   </style>
</head>
<title> Digivision Mailing </title>
<body style="margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: Arial, Verdana, sans-serif;">

<!-- Start Main Table -->
<table width="100%" height="100%" cellpadding="0" style="padding 20px 0px 20px 0px" bgcolor="#e1e1e1">
<tr align="center">
	<td>
		<!-- Start Header -->
		<table width="652" cellpading="0" cellspacing="0" bgcolor="cbc9c9" style="text-align: justify; color:ff0000; font-weight: bold; padding:16px
		0px 16px 14px; font-family: Arial, Verdana, sans-serif;">
				<tr>
					<td>
						<a href="#"><img src="images/digivision.png" align="left" width="235" height="68" alt="digivision logo" border="0"></a>
					</td>
						<td style="text-align: right; font-weight:normal; font-size:13px;">
						<span style="font-weight:bold;">1 maart 2012</span>
					</td>
				</tr>
				</table>
				<!-- End Header -->
				
<!-- Start Ribbon -->
<table cellpading="0" cellspacing="0" width="652" bgcolor="#5c5757">
	<tr>
		<td width="570" height="123" bgcolor="#5c5757" style="vertical-align: top; text-align: justify; font-weight: bold; font-family: Arial, Verdana, sans-serif; padding: 10p
		25px 0px 15px; font-size: 13px; color:#FFFFFF">
			<span style="color:#ffffff; width:562px";> Beste klanten,<br><br>

			Ontdek hier onze wekelijkse promoties en aanbiedingen. Elke week kan u hier onze meest
			interessante producten terugvinden . 
			Uiteraard is dit slechts een kleine greep uit ons assortiment en kan u altijd meer ontdekken 
			op onze website of webshop.</span><br><br>
			<a href="http://www.digivision.be" target="_blank"><img style="display:block" src="images/Button.png" width="110" height="40" alt="Button" border="0"></a>
		</td>
		</tr>
		<tr>
			<td bgcolor="#5c5757" width="562" height="13">
			</td>
		</tr>
</table>
<!-- End Ribbon -->
<!-- Start Promotie 1 -->
<table cellpadding="0" cellspacing="0" width="652" style="padding: 25px 0px 0px 15px" bgcolor="#cbc9c9">
	<tr>
		<td>
			<a href="#" title="Promotie 1"><img style="display:block" src="images/afbeelding.png" align="left" alt="Afbeelding 1" border="0"/></a>
		</td>
		<td valign="top" style="text-align: justify; font-family: Arial, Verdana, sans-serif"; padding-left: 13px line height: 17px; color: #222222">
		<span style="font-size: 20px; font-weight: bold;"> Acer Aspire </span><br><br>
		<span style="padding-right: 10px; font-size: 12px; color: #222222;">
				- 14” LED Scherm<br>
				- Intel Core i3-2330M <br>
				- 4GB DDR3 <br>
				- 500GB HDD<br>
				- Nvidia Gefore GT540M<br>
				- Windows 7 Home Premium<br>
				<a href="http://www.digivision.be" style="font-weight; bold; color: #000000; text-decoration: underline;">Klik hier voor meer info </a>
		</span>
		</td>
	</tr>
	
</table>
<!-- Einde Promotie 1 -->
<!-- Start Promotie 2 -->
<table cellpadding="0" cellspacing="0" width="652" style="padding: 25px 0px 0px 15px" bgcolor="cbc9c9">
	<tr>
		<td>
			<a href="#" title="Promotie 3"><img style="display:block" src="images/afbeelding.png" align="left" alt="Afbeelding 2" border="0"/></a>
		</td>
		<td valign="top" style="text-align: justify; font-family: Arial, Verdana, sans-serif"; padding-left: 13px line height: 17px; color: #222222">
		<span style="font-size: 20px; font-weight: bold;"> Acer Aspire </span><br><br>
		<span style="padding-right: 10px; font-size: 12px; color: #222222;">
				- 14” LED Scherm<br>
				- Intel Core i3-2330M <br>
				- 4GB DDR3 <br>
				- 500GB HDD<br>
				- Nvidia Gefore GT540M<br>
				- Windows 7 Home Premium<br>
				<a href="http://www.digivision.be" style="font-weight; bold; color: #000000; text-decoration: underline;">Klik hier voor meer info </a>
		</span>
		</td>
	</tr>
	
</table>
<!-- Einde Promotie 2 -->

<!-- Start Promotie 3 -->
<table cellpadding="0" cellspacing="0" width="652" style="padding: 25px 0px 20px 15px" bgcolor="#cbc9c9">
	<tr>
		<td>
			<a href="#" title="Promotie 3"><img style="display:block" src="images/afbeelding.png" align="left" alt="Afbeelding 3" border="0"/></a>
		</td>
		<td valign="top" style="text-align: justify; font-family: Arial, Verdana, sans-serif"; padding-left: 13px line height: 17px; color: #222222">
		<span style="font-size: 20px; font-weight: bold;"> Acer Aspire </span><br><br>
		<span style="padding-right: 10px; font-size: 12px; color: #222222;">
				- 14” LED Scherm<br>
				- Intel Core i3-2330M <br>
				- 4GB DDR3 <br>
				- 500GB HDD<br>
				- Nvidia Gefore GT540M<br>
				- Windows 7 Home Premium<br>
				<a href="http://www.digivision.be" style="font-weight; bold; color: #000000; text-decoration: underline;">Klik hier voor meer info </a>
		</span>
		</td>
	</tr>

</table>
<!-- Einde Promotie 3 -->

<!-- Start Ribbon -->
<table cellpading="0" cellspacing="0" width="652" bgcolor="#5c5757">
	<tr>
		<td width="570" height="60" bgcolor="#5c5757" style="width:570px; font-weight: normal; font-size: 11px; vertical-align:top; font-size:12px; line-height:135%; text-align: justify; 
				font-family: Arial, Verdana, sans serif; color: #FFFFFF">
			<span style="font-size: 10px; color:#ffffff; width:562px";>	Digivision BVBA, Ginderbroek 29, 2400 Mol<br>
		Openingsuren :  Ma-Vrij : 9u30-18u30 Zat : 9u30-17u00  -- Zon- en feestdagen gesloten.<br>
		Indien u deze mail niet meer wil ontvangen, <a href="#" style="font-weight: bold; color #000000; text-decoration: underline;">klik hier</a><br>
		Aanbiedingen geldig tot 15-03-2012 of uitputting voorraad.</span><br><br>
		</td>
		</tr>
		<tr>
			<td bgcolor="#5c5757" width="562" height="13">
			</td>
		</tr>
			<tr>
				<td bgcolor="#cbc9c9" height="20"></td>
			</tr>
</table>
<!-- End Ribbon -->


<!-- End Footer -->
</td>
</tr>
</table>
<!-- Einde Main Table -->
</body>
</html>
N

Natsu

Legacy Member
<head>
<style type="text/css">
img { display: block; }
</style>
</head>

Dit had ik gevonden als eventuele fix, maar helaas lost het niets op voor mij ( ofwel doe ik iets verkeerd )
D

Dieterg

Legacy Member
De code kan inderdaad beter en daar zit waarschijnlijk uw fout! Een table in een table :wtf:? Wat je daar op uw screenshot laat zien kan perfect allemaal in 1 tabel.

Google eens op rowspan en colspan!
S

Senn0

Legacy Member
Mam zei:
De code kan inderdaad beter en daar zit waarschijnlijk uw fout! Een table in een table :wtf:? Wat je daar op uw screenshot laat zien kan perfect allemaal in 1 tabel.

Google eens op rowspan en colspan!
Klik om te vergroten...

Rowspan en colspan is not done in een html email
D

Dubbelpunt

Legacy Member
Xtermie zei:
<head>
<style type="text/css">
img { display: block; }
</style>
</head>

Dit had ik gevonden als eventuele fix, maar helaas lost het niets op voor mij ( ofwel doe ik iets verkeerd )
Klik om te vergroten...

Dit moet inline...
En table in table is doodnormaal voor een nieuwsbrief...


Als je geen spaces wil, dan moet je 1 tabel gebruiken ipv verschillende onder mekaar.
-

-BVR-

Legacy Member
Ook moet uw title in uw head staan en je hebt geen doctype gedefinieerd.
S

Senn0

Legacy Member
Ik heb op het werk ergens wel een bestandje staan hoe je het beste een html mail maakt, zal morgen eens kijken.
D

Dubbelpunt

Legacy Member
BramVroy zei:
Ook moet uw title in uw head staan en je hebt geen doctype gedefinieerd.
Klik om te vergroten...

Title tag en doctype zijn toch niet nodig voor een nieuwsbrief?
N

Natsu

Legacy Member
aantal suggesties geprobeerd ondertussen maar nog steeds is de weergave in gmail niet correct.. weet zelf niet meer wat te proberen nu :p
N

Natsu

Legacy Member
heb men vrije dag nu en ben niet op het werk, dus kan ook niet aan de code.. maar dit staat er al bij, en het fenomeen doet zich ook voor in de tables waar geen afbeeldingen in staan..
S

Senn0

Legacy Member
Xtermie zei:
heb men vrije dag nu en ben niet op het werk, dus kan ook niet aan de code.. maar dit staat er al bij, en het fenomeen doet zich ook voor in de tables waar geen afbeeldingen in staan..
Klik om te vergroten...

Dit is een handige site trouwens: https://www.emailonacid.com

Kan je gratis tests doen in GMail enzo, staat ook bij wat er per email client niet goed is aan je code, misschien dat je daar iets meer uit kan halen.
N

Natsu

Legacy Member
Hartelijk dank aan Senn0 die het probleem gevonden heeft..
Het probleem zat hem niet in de code, maar in het versturen vanuit Outlook..
m

meuh

Legacy Member
Nooit geen padding of margin gebruiken in HTML mails.
Dit zorgt sowieso voor problemen !
Dit kan je oplossen door geneste tabellen.
Veel email clients maken er een probleem van als je je CSS bovenaan zet. Gebruik inline CSS
vb:
<img src="image/x.jpg" width="100" height="20" style="display:block;" />
W

W0utR

Legacy Member
Bij mailchimp kan je trouwens ook heel makkelijk je mail testen op alle mogelijke clients, je moet het wel enkel met een screenshot doen, maar vaak is dat voldoende om een probleem op te sporen.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan