Problem med html tabell i e-post

Aiven · 16. desember 2011

Jeg har laget et nyhetsbrev i html/css for avisen Le Monde Diplomatique. Brevet vises fint i nettlesere og e-postlesere, men når brevet vises i hotmail/gmail, fungerer ikke tabellen jeg la inn som skygge skikkelig. Siden skal egentlig se ut slik som dette. Se bildet, for å se hvordan e-posten ser ut i gmail/hotmail, legg merke til at skyggen nederst ikke vises som den skal. Jeg håper noen kan hjelpe meg i riktig retning med dette, for jeg skjønner ikke hva som er galt.

Kildekode, html mal (laget for mailchimp av undertegnede):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       <!-- This is a simple example template that you can edit to create your own custom templates -->
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <!-- Facebook sharing information tags -->
       <meta property="og:title" content="*|MC:SUBJECT|*" />

       <title>*|MC:SUBJECT|*</title>
	<style type="text/css">
A:link {text-decoration: none; color: black;}
A:visited {text-decoration: none; color: black;}
A:active {text-decoration: none; color: black;}
A:hover {text-decoration: underline; color: black;}

	/* NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail. 
       MailChimp automatically inlines CSS for you or you can use this tool: http://beaker.mailchimp.com/inline-css. */

		/* Client-specific Styles */
		#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
		body{width:100% !important;} /* Force Hotmail to display emails at full width */
		body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */

		/* Reset Styles */
		body{margin:0; padding:0;}
/*body{
background: url("bilder/forside_768w.jpg") 50% 50% no-repeat;
}*/

		img{border:none; font-weight:bold; outline:none; text-decoration:none; text-transform:capitalize;}
		#bakgrunnstb{height:100% !important; margin:0; padding:0; width:100% !important;}

		/* Template Styles */

		/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: COMMON PAGE ELEMENTS /\/\/\/\/\/\/\/\/\/\ */

		/**
		* @tab Page
		* @section background color
		* @tip Set the background color for your email. You may want to choose one that matches your company's branding.
		* @theme page
		*/
		body, .bakgrunnstb{
			/*@editable*/ background-color:#808080;
		}

		/**
		* @tab Page
		* @section email border
		* @tip Set the border for your email.
		*/
		#midtstillingstb{
			/*@editable*/ border: 6px solid #FAFAFA;
			background-color:#FAFAFA;
		}

		/**
		* @tab Page
		* @section hodetekst
		* @tip Fonten som brukes i informasjonen i avishodet.
		* @theme hodetekst1
		*/
		ht, .ht{
			/*@editable*/ color:#000000;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:10px;
		}





		/**
		* @tab Page
		* @section heading 2
		* @tip Set the styling for all second-level headings in your emails.
		* @theme heading2
		*/
		h1, .h1{
			/*@editable*/ color:#202020;
			display:block;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:30px;
			/*@editable*/ font-weight:bold;
			/*@editable*/ line-height:100%;
			margin-bottom:10px;
			/*@editable*/ text-align:left;
		}

		/**
		* @tab Page
		* @section heading 3
		* @tip Set the styling for all third-level headings in your emails.
		* @theme heading3
		*/
		h2, .h2{
			/*@editable*/ color:#202020;
			display:block;
			/*@editable*/ font-family: arial;
			/*@editable*/ font-size:15px;
			/*@editable*/ font-weight:bold;
			/*@editable*/ line-height:100%;
			/*@editable*/ text-align:left;
		}

		/**
		* @tab Page
		* @section heading 4
		* @tip Set the styling for all fourth-level headings in your emails. These should be the smallest of your headings.
		* @theme heading4
		*/
		h3, .h3{
			/*@editable*/ color:#202020;
			display:block;
			/*@editable*/ font-family: palatino;
			/*@editable*/ font-size:17px;
			/*@editable*/ font-weight:bold;
			/*@editable*/ line-height:100%;
			/*@editable*/ text-align:left;
		}

		/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: PREHEADER /\/\/\/\/\/\/\/\/\/\ */

		/**
		* @tab Header
		* @section preheader style
		* @tip Set the background color for your email's preheader area.
		* @theme page
		*/
		#templatePreheader{
			/*@editable*/ background-color:#FAFAFA;
		}

		/**
		* @tab Header
		* @section preheader text
		* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
		*/
		.preheaderContent div{
			/*@editable*/ color:#DFDFDF;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:10px;
			/*@editable*/ line-height:100%;
		}

		/**
		* @tab Header
		* @section preheader link
		* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
		*/
		.preheaderContent div a:link, .preheaderContent div a:visited{
			/*@editable*/ color:#336699;
			/*@editable*/ font-weight:normal;
			/*@editable*/ text-decoration:underline;
		}

		.preheaderContent div img{
			height:auto;
			max-width:768px;
		}

		/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: HEADER /\/\/\/\/\/\/\/\/\/\ */

		/**
		* @tab Header
		* @section header style
		* @tip Set the background color and border for your email's header area.
		* @theme header
		*/
		#templateHeader{
			/*@editable*/ background-color:#FAFAFA;
			/*@editable*/ border-bottom:0;
		}

		/**
		* @tab Header
		* @section header text
		* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
		*/
		/**
		* @tab Header
		* @section header text
		* @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
		*/
		.headerContent{
			/*@editable*/ color:#202020;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:34px;
			/*@editable*/ font-weight:bold;
			/*@editable*/ line-height:100%;
			/*@editable*/ padding:0;
			/*@editable*/ text-align:center;
			/*@editable*/ vertical-align:middle;
		}


		/**
		* @tab Header
		* @section header link
		* @tip Set the styling for your email's header links. Choose a color that helps them stand out from your text.
		*/
		.headerContent a:link, .headerContent a:visited{
			/*@editable*/ color:#336699;
			/*@editable*/ font-weight:normal;
			/*@editable*/ text-decoration:underline;
		}


		/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: MAIN BODY /\/\/\/\/\/\/\/\/\/\ */

		/**
		* @tab Body
		* @section body style
		* @tip Set the background color for your email's body area.
		*/
		#templateContainer, .bodyContent{
			/*@editable*/ background-color:#FAFAFA;
		}

		/**
		* @tab Body
		* @section body text
		* @tip Set the styling for your email's main content text. Choose a size and color that is easy to read.
		* @theme main
		*/
		.bodyContent div{
			/*@editable*/ color:#000000;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:12px;
			/*@editable*/ line-height:150%;
			/*@editable*/ text-align:left;
		}

		/**
		* @tab Body
		* @section body link
		* @tip Set the styling for your email's main content links. Choose a color that helps them stand out from your text.
		*/
		.bodyContent div a:link, .bodyContent div a:visited{
			/*@editable*/ color:#black;
			/*@editable*/ font-weight:normal;
			/*@editable*/ text-decoration:none;
		}

		.bodyContent img{
			display:inline;
			margin-bottom:10px;
		}

		/* /\/\/\/\/\/\/\/\/\/\ STANDARD STYLING: FOOTER /\/\/\/\/\/\/\/\/\/\ */

		/**
		* @tab Footer
		* @section footer style
		* @tip Set the background color and top border for your email's footer area.
		* @theme footer
		*/
		#templateFooter{
			/*@editable*/ background-color:#FAFAFA;
			/*@editable*/ border-top:0;
		}

		/**
		* @tab Footer
		* @section footer text
		* @tip Set the styling for your email's footer text. Choose a size and color that is easy to read.
		* @theme footer
		*/
		.footerContent div{
			/*@editable*/ color:#707070;
			/*@editable*/ font-family:Arial;
			/*@editable*/ font-size:12px;
			/*@editable*/ line-height:125%;
			/*@editable*/ text-align:left;
		}

		/**
		* @tab Footer
		* @section footer link
		* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
		*/
		.footerContent div a:link, .footerContent div a:visited{
			/*@editable*/ color:#336699;
			/*@editable*/ font-weight:normal;
			/*@editable*/ text-decoration:underline;
		}

		.footerContent img{
			display:inline;
		}

		/**
		* @tab Footer
		* @section social bar style
		* @tip Set the background color and border for your email's footer social bar.
		*/
		#social{
			/*@editable*/ background-color:#FAFAFA;
			/*@editable*/ border:0px solid #F5F5F5;
		}

		/**
		* @tab Footer
		* @section social bar style
		* @tip Set the background color and border for your email's footer social bar.
		*/
		#social div{
			/*@editable*/ text-align:center;
		}

		/**
		* @tab Footer
		* @section utility bar style
		* @tip Set the background color and border for your email's footer utility bar.
		*/
		#utility{
			/*@editable*/ background-color:#FDFDFD;
			/*@editable*/ border-top:1px solid #F5F5F5;
		}

		/**
		* @tab Footer
		* @section utility bar style
		* @tip Set the background color and border for your email's footer utility bar.
		*/
		#utility div{
			/*@editable*/ text-align:center;
		}


</style>
</head>

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
       <center>
       	<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bakgrunnstb">
           <tr>
                               <td align="center" valign="top" class="preheaderContent">
                                   <table border="0" cellpadding="0" cellspacing="0" width="804" id="preheaderrammetb">
                                   	<tr>
                                       	<td width="800">

                                               <!-- // Begin Module: Standard Preheader \\ -->
                                               <table border="0" bgcolor="#909090" cellpadding="10" cellspacing="0" width="800">
                                                   <tr>

                                                       <td valign="top">
                                                           <div mc:edit="std_preheader_content">
                                                               Månedlig nyhetsbrev for norske Le Monde diplomatique.</div>
                                                       </td>
                                                       <td valign="top" align="right" width="300">
                                                           <div mc:edit="std_preheader_links">
                                                               <!-- *|IFNOT:ARCHIVE_PAGE|* -->Vises ikke e-posten korrekt? <a href="*|ARCHIVE|*" target="_blank">Se den i din nettleser</a><!-- *|END:IF|* -->
                                                           </div>
                                                       </td>
                                                   </tr>
                                               </table>
                               	<!-- // End Module: Standard Preheader \\ -->
                                           </td>
                                           <td width="4" bgcolor="#808080">
                                           </td>

                                      </tr>
                                   </table>

                               </td>
                           </tr>
           	<tr>
               	<td align="center" valign="top">

                   <table border="0" cellpadding="0" cellspacing="0" id="skyggetb1"><tr><td>
                   	<table border="0" cellpadding="10" cellspacing="0" width="768" bgcolor="#909090" id="midtstillingstb"><tr><td><img src="http://www.test.lmd.no/sidebredde_768.gif"/>
                       <table border="0" cellpadding="0" cellspacing="0" width="max" id="spaltetb">
                       	<tr>
                           	<td width="140" valign="top">
                              	  <table width="140" cellpadding="0" cellspacing="0" height="1124" border="0" id="stripetb">
                                   	<tr>

                                  		  <td width="138" align="center">
                                           	<table width="110" cellpadding="0" cellspacing="0" height="1124" border="0" id="sidemenytb">
                                               	<tr>

                                                   	<td valign="top" heigth="162" align="center"><!-- // Begin Module: hovedbilde \\ -->
                                           	<img src="http://eivind.dgw.no/lemonde/bilder/plassholder_110x162.gif" style="max-width:110px;" id="bildetilvenstre" mc:label="venstre_bilde" mc:edit="venstre_bilde"/>
                                           	<!-- // End Module: hovedbilde \\ -->
                                                       </td>
                                                   </tr>
                                                   <tr>

                                                     <td height="max">
                                                           <table border="0" cellpadding="0" cellspacing="0" height="962" width="100%" id="tekstvenstretb">
                                                           <tr>
                                              					<td height="10" ></td>
                                             				</tr>
                                                           <tr>

                                                               <td width="134" valign="top" align="left" class="bodyContent"><div mc:edit="tekstvenstre">
                                                                 <p>BENYTT H2 FOR OVERSKRIFTER Sett inn all tekst som skal på siden her og legg inn lenker på hver enkelt.</p>                                                              
                                                             </div></td>
                                                           </tr>
                                                           </table>	
                                                       </td>

                                                   </tr>
                                                </table>

                                       	</td>
                                           <td width="1" height="max" bgcolor="#909090">
                                       	</td>
                                           <td width="1" height="max">
                                       	</td>
                                       </tr>
                                    </table></td>


                            	<td width="623" valign="top">
                                   <!-- // Begin Template Body \\ -->
                                   <table border="0" cellpadding="7" cellspacing="0" id="logorammetb" width="max" height="1138">
                                     <tr>
                                       <td height="152" align="center"><p><img src="http://eivind.dgw.no/lemonde/bilder/header.png" alt="Le Monde Diplomatique" align="bottom" /></p>
                                       </td>
                                     </tr>
                                     <tr>
                                     	<td align="center" valign="top">
                                       	<!-- // Begin Module: Standard Content \\ -->
                                     		<table border="0" cellpadding="0" cellspacing="0" id="strektb1" width="593" height="max">
                                             <tr>
                                               <td height="1" width="593" bgcolor="#909090"></td>
                                             </tr>
                                           </table>
                                         <table border="0" cellpadding="0" cellspacing="4" id="hodeteksttb" width="601" height="15">
                                             <tr>

                                               <td width="400" valign="top" class="ht">
                                               	<div mc:edit="info1">
                                                   	Internasjonal avis: 75 utgaver, 29 språk, opplag 2,4 millioner
                                                   </div>
                                               </td>
                                               <td align="right" width="184" valign="top" class="ht">
                                               	<div mc:edit="info2">
                                                   	Nyhetsbrev | Oktober 2011
                                                   </div>
                                               </td>
                                             </tr>
                                           </table>
                                           <table border="0" cellpadding="0" cellspacing="0" id="strektb2" width="593" height="max">
                                             <tr>
                                               <td height="1" width="593" bgcolor="#909090"></td>
                                             </tr>
                                             <tr>
                                               <td height="3" width="593"></td>
                                             </tr>
                                           </table>
                                           <table border="0" class="bodyContent" cellpadding="0" cellspacing="5" id="hovedtb" width="603"> 

                                             <tr style="display:table-row">
                                               <td width="191" height="89" valign="top">
                                               	<div mc:edit="hboks1">BENYTT STIL H3 FOR OVERSKRIFTER<br />
                                               	Skriv inn sak og legg inn lenke.</div></td>
                                           	<td width="1" height="89" bgcolor="#909090"></td>
                                               <td width="192" valign="top"><div mc:edit="hboks2">BENYTT STIL H3 FOR OVERSKRIFTER<br />
                                                 Skriv inn sak og legg inn lenke.</div></td>
                                               <td width="1" height="89" bgcolor="#909090"></td>
                                               <td width="191" valign="top"><div mc:edit="hboks3">BENYTT STIL H3 FOR OVERSKRIFTER<br />
                                                 Skriv inn sak og legg inn lenke.</div></td>
                                             </tr>
                                           </table>
                                           <table border="0" heigth="822" cellpadding="0" cellspacing="0" id="hovedtb2" width="593">
											<tr>
                                               	<td height="3"></td>
                                             	</tr>
                                            	<tr>
                                               	<td height="5" bgcolor="#ddc300"></td>
                                             	</tr>
                                               <tr>
                                               	<td height="20"></td>
                                             	</tr>
                                             	<tr>                                                	
                                               	<td><!-- // Begin Module: hovedbilde \\ -->
                                           	<img src="http://eivind.dgw.no/lemonde/bilder/plassholder_593x400.gif" style="max-width:593px;" id="hbilde" mc:label="hoved_bilde" mc:edit="hoved_bilde"/>
                                           	<!-- // End Module: hovedbilde \\ --></td>
                                             	</tr>
                                                <tr>
                                              		<td height="10" ></td>
                                             	</tr>
                                             	<tr>
                                              		<td height="44">
                                                   <!-- // Begin Module: LMD2sak bilde \\ -->
                                           	<img src="http://eivind.dgw.no/lemonde/bilder/plassholder_593x41.gif" style="max-width:593px;" id="lmd2sakbilde" mc:label="lmd2_bilde" mc:edit="lmd2_bilde"/>
                                           	<!-- // End Module: LMD2sak bilde \\ -->
                                               <!-- // End Module: Standard Content \\ -->
                                               <!-- // End Template Body \\ --></td>
                                             	</tr>
                                               <tr>
                                                       <td align="center" valign="top">
                                   <!-- // Begin Template Footer \\ -->
                               	<table border="0" cellpadding="10" cellspacing="0" width="593" id="templateFooter">
                                   	<tr>
                                       	<td valign="top" class="footerContent">

                                               <!-- // Begin Module: Standard Footer \\ -->
                                               <table border="0" cellpadding="10" cellspacing="0" width="100%">
                                                   <tr>
                                                       <td colspan="2" valign="middle" id="social">
                                                           <div mc:edit="std_social">
                                                               <a href="https://twitter.com/#!/lmd_no">Følg på Twitter</a> | <a href="https://www.facebook.com/pages/Le-Monde-diplomatique/84836242477">Lik på Facebook</a> | <a href="*|FORWARD|*">Videresend nyhetsbrev</a> | <a href="*|UNSUB|*">Kanseller nyhetsbrev</a>
                                                           </div>
                                                       </td>
                                                   </tr>


                                               </table>
                                               <!-- // End Module: Standard Footer \\ -->

                                           </td>
                                                   </tr>
                                           </table>
                                           <!-- // End Template Footer \\ -->
                                       </td>
                                     </tr>
                                 </table>

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

            </table>


            </td>
            	<td width="3" valign="top" bgcolor="#0F0F0F"><img src="http://dl.dropbox.com/u/5021045/skygge.gif" /></td>
            </tr>
            <tr>
            	<td heigth="3" align="left" bgcolor="#0F0F0F"><img src="http://dl.dropbox.com/u/5021045/skygge.gif" /></td><td width="3" heigth="3" bgcolor="#0F0F0F"><img src="http://dl.dropbox.com/u/5021045/skygge2.gif" /></td>


            </table>

            </td>
            </tr>
		</table>
	</center>
</body>
</html>

Endret 16. desember 2011 av Avien

Aiven · 19. desember 2011

bump

The Stig · 19. desember 2011

Har du forsøkt å bruke border på tabellen i stedet? Å bruke overlappende tabeller er meg bekjent noe man helst bør undergå. For eks,

border-top: 2px solid #fff;

border-right: 2px solid #000;

border-bottom: 2px solid #000;

border-left: 2px solid #fff;

Aiven · 20. desember 2011

Har du forsøkt å bruke border på tabellen i stedet? Å bruke overlappende tabeller er meg bekjent noe man helst bør undergå. For eks,

border-top: 2px solid #fff;

border-right: 2px solid #000;

border-bottom: 2px solid #000;

border-left: 2px solid #fff;

Takk for tipset. Mener du at man ikke bør ha tabeller inni hverandre? Er ikke det nokså vanlig da? Om jeg bruker ditt knep, får jeg den intenderte skyggeeffekten, jeg har lagt opp til med 3*3 pixel bilder i hjørnene?

agm · 20. desember 2011

Du kan jo ta en titt på HTML Email Boilerplate om du ikke allerede har gjort det. Mulig du kan finne en løsning der.

Aiven · 20. desember 2011

Du kan jo ta en titt på HTML Email Boilerplate om du ikke allerede har gjort det. Mulig du kan finne en løsning der.

Det ser jeg ikke bort ifra nei, skal se nøye igjennom og gi tilbakemelding. Takk.

Aiven · 20. desember 2011

Du kan jo ta en titt på HTML Email Boilerplate om du ikke allerede har gjort det. Mulig du kan finne en løsning der.

Det ser jeg ikke bort ifra nei, skal se nøye igjennom og gi tilbakemelding. Takk.

Kom ikke så mye lenger med dette, men takk uansett. Er ikke bare bare å kode html til e-poster visst.

agm · 20. desember 2011

Nei det er et mareritt, og det er nok bare å innse at du ikke vil få det optimalt for alle. Jeg fokuserer bare på de vanligste mailklientene og webmail tilbyderne.

Men hvis skyggen er det eneste problemet som gjenstår, ville jeg gitt nyhetsbrevet tommel opp og godkjent!

NikkaYoichi · 20. desember 2011

Man bruker da ikke tabeller til designet? :cry:

Aiven · 20. desember 2011

Man bruker da ikke tabeller til designet?

Hva bruker man?

Nei det er et mareritt, og det er nok bare å innse at du ikke vil få det optimalt for alle. Jeg fokuserer bare på de vanligste mailklientene og webmail tilbyderne.

Men hvis skyggen er det eneste problemet som gjenstår, ville jeg gitt nyhetsbrevet tommel opp og godkjent!

Takk for sympatien, det blir nok resultatet. Skyggen fungerer vel i 50% av tilfellene eller noe, så det er marginalt bedre enn ingen skygge antar jeg.

Endret 20. desember 2011 av Avien

NikkaYoichi · 20. desember 2011

Man bruker da ikke tabeller til designet?

Hva bruker man?

divs + CSS.

agm · 20. desember 2011

Man bruker da ikke tabeller til designet?

Hva bruker man?

divs + CSS.

Lykke til med det...

Er selv sterkt imot feil bruk av tabeller på nettsider. Når det gjelder email, er det så inkonsekvent og dårlig CSS støtte blant mailklienter at tabeller er det eneste som gir akseptable resultat.

Mailklientene ligger mange år etter nettlesere. Det er nok ikke tilfeldig at MailChimp, Campaign Monitor og HTML Email Boilerplate (for å nevne noen av de største aktørene) fortsatt baserer seg på tabeller. Synd, men sant.

Aiven · 20. desember 2011

divs + CSS.

Tror det er en grunn til at mailchimp malen baserer seg på tabeller. Man står ikke like fritt, når det gjelder koding av html for e-post.

Logg inn

Problem med html tabell i e-post

Anbefalte innlegg

Aiven

Lenke til kommentar

Videoannonse

Aiven

Lenke til kommentar

The Stig

Lenke til kommentar

Aiven

Lenke til kommentar

agm

Lenke til kommentar

Aiven

Lenke til kommentar

Aiven

Lenke til kommentar

agm

Lenke til kommentar

NikkaYoichi

Lenke til kommentar

Aiven

Lenke til kommentar

NikkaYoichi

Lenke til kommentar

agm

Lenke til kommentar

Aiven

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Bly og syntetisk olje til 1971 påhengs?

Hvem er aktive 0 medlemmer