Page 1 of 2 12 Last
  1. #1
    Natsu's Avatar
    Registered
    23/07/02
    Location
    Ham
    Posts
    1,303
    iTrader
    28 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/4

    Gmail geeft spaces in html mail

    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



    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>
    If you expect the world to be fair with you because you are fair, you're fooling yourself. It's like expecting a lion not to eat you, because you didn't eat him
    Aion : Natsumiko on Server Deyla (65 sorcerer) legion leader of Lionhearts (Rank 1 legion Asmodian)
    The Secret World: Grimm, Natsumiko
    no votes  

  2. #2
    Natsu's Avatar
    Registered
    23/07/02
    Location
    Ham
    Posts
    1,303
    iTrader
    28 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/4
    <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 )
    If you expect the world to be fair with you because you are fair, you're fooling yourself. It's like expecting a lion not to eat you, because you didn't eat him
    Aion : Natsumiko on Server Deyla (65 sorcerer) legion leader of Lionhearts (Rank 1 legion Asmodian)
    The Secret World: Grimm, Natsumiko
    no votes  

  3. #3
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    De code kan inderdaad beter en daar zit waarschijnlijk uw fout! Een table in een table ? Wat je daar op uw screenshot laat zien kan perfect allemaal in 1 tabel.

    Google eens op rowspan en colspan!
    -
    no votes  

  4. #4
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Mam View Post
    This quote is hidden because you are ignoring this member. Show
    De code kan inderdaad beter en daar zit waarschijnlijk uw fout! Een table in een table ? Wat je daar op uw screenshot laat zien kan perfect allemaal in 1 tabel.

    Google eens op rowspan en colspan!
    Rowspan en colspan is not done in een html email
    ...
    no votes  

  5. #5
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Oké, mijn excuses ik zat er inderdaad ver naast!!

    Heb je hier al naar gekeken? https://github.com/mailchimp/Email-B...ster/templates

    edit: deze is ook wel handig http://htmlemailboilerplate.com/

    Ik heb toch weer iets bijgeleerd, ik dacht dat table in table echt not done was! Ik neem aan dat dit enkel is voor email templates?
    -
    no votes  

  6. #6
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Xtermie View Post
    This quote is hidden because you are ignoring this member. Show
    <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 )
    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.
    no votes  

  7. #7

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Ook moet uw title in uw head staan en je hebt geen doctype gedefinieerd.
    no votes  

  8. #8
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    Ik heb op het werk ergens wel een bestandje staan hoe je het beste een html mail maakt, zal morgen eens kijken.
    ...
    no votes  

  9. #9
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by BramVroy View Post
    This quote is hidden because you are ignoring this member. Show
    Ook moet uw title in uw head staan en je hebt geen doctype gedefinieerd.
    Title tag en doctype zijn toch niet nodig voor een nieuwsbrief?
    no votes  

  10. #10

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Dubbelpunt View Post
    This quote is hidden because you are ignoring this member. Show
    Title tag en doctype zijn toch niet nodig voor een nieuwsbrief?
    Which doctype should I use in HTML email? - Blog - Campaign Monitor

    Kleine verschillen, maar het kan sommige probleempjes wel oplossen imo.

    En van de title tag: ik zeg alleen dat als je hem gebruikt - zoals Xtermie heeft gedaan, je hem toch in je head moet zetten en niet tussen je head en body in.
    no votes  

  11. #11
    Natsu's Avatar
    Registered
    23/07/02
    Location
    Ham
    Posts
    1,303
    iTrader
    28 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/4
    aantal suggesties geprobeerd ondertussen maar nog steeds is de weergave in gmail niet correct.. weet zelf niet meer wat te proberen nu
    If you expect the world to be fair with you because you are fair, you're fooling yourself. It's like expecting a lion not to eat you, because you didn't eat him
    Aion : Natsumiko on Server Deyla (65 sorcerer) legion leader of Lionhearts (Rank 1 legion Asmodian)
    The Secret World: Grimm, Natsumiko
    no votes  

  12. #12

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Post dan nog eens de code die je nu gebruikt.
    no votes  

  13. #13
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    Zet dit bij elke img tag:

    Code:
    style="display: block;"
    ...
    no votes  

  14. #14
    Natsu's Avatar
    Registered
    23/07/02
    Location
    Ham
    Posts
    1,303
    iTrader
    28 (97%)
    Mentioned
    0 Post(s)
    Reputation
    0/4
    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..
    If you expect the world to be fair with you because you are fair, you're fooling yourself. It's like expecting a lion not to eat you, because you didn't eat him
    Aion : Natsumiko on Server Deyla (65 sorcerer) legion leader of Lionhearts (Rank 1 legion Asmodian)
    The Secret World: Grimm, Natsumiko
    no votes  

  15. #15
    Senn0's Avatar
    Registered
    14/03/09
    Location
    Sint-Truiden
    Posts
    899
    iTrader
    26 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Xtermie View Post
    This quote is hidden because you are ignoring this member. Show
    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..
    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.
    ...
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in