SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Email Newsletter

    Hi

    I am not sure if I am doing this right I have designed a HTML newsletter with in-line styles, for some reason when i view the html newsletter from my hotmail account none of the css is showing.

    Does anyone know why this is, and could someone give me help on how to properley code for email newsletters, and where I might be going wrong.!?

    Below is the code for my newsletter

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Teleticket Newsletter
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    *{
    	padding:0;
    	margin:0;
    }
    body{
    	margin:10px 0px 0px 0px;
    	padding:0;
    	font:11px Verdana,Arial,Geneva,Helvetica,sans-serif;
    	background:#455D7B;
    	text-align:center;
    }
    img{
    	border:0;
    }
    /* STRUCTURE
    ----------------------------------------------------------------- */
    #wrapper{
    	width:600px;
    	margin-left:auto;
    	margin-right:auto;
    	background:#fff;
    	text-align:left;
    }
    #inner{
    	padding:2px;
    }
    #header{
    	margin-left:auto;
    	margin-right:auto;
    	background:#19005F;
    	border-bottom:5px solid #fff;
    }
    #footer{
    	margin-left:auto;
    	margin-right:auto;
    	background:#19005F;
    	border-top:1px solid #fff;
    }
    /* TABLES
    ----------------------------------------------------------------- */
    
    table#icons{
    	padding:0;
    	border:0;
    }
    table#footer{
    	background:#19005F;
    	color:#fff;
    	padding:0;
    	border:0;
    	text-align:left;
    }
    table#footer td.text{
    	font-size:10px;
    	width:395px;
    	border-top:1px solid #fff;
    	padding:8px;
    }
    table#footer td.unsubscribe{
    	border-top:1px solid #fff;
    	padding:8px;
    	text-align:right;
    }
    table#icons td{
    	padding-bottom:10px;
    	font-size:11px;
    }
    td#date{
    	font-size:14px;
    	font-weight:bold;
    	background:#EDB301;
    	color:#fff;
    	border:0;
    	text-align:center;
    }
    td#home{
    	padding:0 30px 0 0;
    	text-align:right;
    	background:url(images/toppic1.jpg) #19005F no-repeat;
    	background-position:0 100%;
    }
    table.headlineboxtop{
    	font-size:12px;
    	font-weight:bold;
    	background:#154270;
    	color:#fff;
    }
    table.headlineboxtop h1{
    	font-size:12px;
    	font-weight:bold;
    	color:#fff;
    	padding:5px;
    }
    td.headlineboxpic{
    	border-top:1px solid #fff;
    	border-bottom:1px solid #fff;
    	border-right:1px solid #fff;
    }
    td.headlineboxpicend{
    	border-top:1px solid #fff;
    	border-bottom:1px solid #fff;
    }
    td.headlineboxtext{
    	font-size:11px;
    	color:#fff;
    	font-weight:normal;
    	background:#4E8CB5;
    	border-right:1px solid #fff;
    	border-bottom:8px solid #75B5D8;
    	padding:8px;
    }
    td.headlineboxtextend{
    	font-size:11px;
    	font-weight:normal;
    	color:#fff;
    	background:#4E8CB5;
    	border-bottom:8px solid #75B5D8;
    	padding:8px;
    }
    td#leftcontent{
    	font-size:11px;
    	font-weight:normal;
    	color:#19005F;
    	background:#E6E6E6;
    	border-top:1px solid #fff;
    	padding:8px;
    	width:183px;
    }
    
    /* TEXT
    ----------------------------------------------------------------- */
    h1,h2{
    	font-size:12px;
    	font-weight:bold;
    }
    h1{
    	color:#EDB301;
    	padding:0 0 0px 8px;
    }
    p{
    	font-size:11px;
    	padding:0 5px 0px 8px;
    	line-height:19px;
    }
    /* LINKS
    ----------------------------------------------------------------- */
    a{
    	font-size:11px;
    	color:#19005F;
    }
    a:hover{
    	color:#EDB301;
    }
    
    /* MISC
    ----------------------------------------------------------------- */
    .greyline{
    	border-bottom:1px solid #E6E6E6;
    	margin-bottom:10px;
    	margin-left:8px;
    }
    br.smallbr{
    	line-height:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="inner">
    		<table cellspacing="0" cellpadding="0" id="header">
    			<tr>
    				<td width="198">[img]images/logo.gif[/img]
    				<td id="home">[img]images/title-home.gif[/img]
    			</tr>
    			<tr>
    				<td id="date">Newsletter
    June 2005
    				<td colspan="2">[img]images/toppic2.jpg[/img]
    			</tr>
    		</table>
    		<table cellspacing="0" cellpadding="0" class="headlineboxtop">
    			<tr>
    				<td>Headline 1
    
    
    				<td>Headline 1
    
    
    				<td>Headline 1
    
    
    			</tr>
    			<tr>
    				<td class="headlineboxpic">[img]images/pic1.jpg[/img]
    				<td class="headlineboxpic">[img]images/pic2.jpg[/img]
    				<td class="headlineboxpicend">[img]images/pic3.jpg[/img]
    			</tr>
    			<tr>
    				<td class="headlineboxtext">Text
    				<td class="headlineboxtext">Text
    				<td class="headlineboxtextend">Text
    			</tr>
    		</table>
    		<table cellspacing="0" cellpadding="0">
    			<tr>
    				<td rowspan="4" id="leftcontent" valign="top">
        		    	<table cellspacing="0" cellpadding="0" id="icons">
    						<tr>Contact Us
    
    
    						<tr>
        		    			<td width="27">[img]images/icon-t.gif[/img]
        		    			<td>0871 6666 747
    						</tr>
    						<tr>
        		    			<td>[img]%22images/icon-e.gif%22[/img]
        		    			<td>sales@teletickettravel.com
    						</tr>
    						<tr>
        		    			<td>[img]%22images/icon-w.gif%22[/img]
        		    			<td>www.teletickettravel.com
    						</tr>
    					</table>
    				</td>
    				<td>
    					<br class="smallbr" />
    					<h1>Headline
    					<p>Text
    
    
    					<div class="greyline">
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<h1>Headline
    					<p>Text
    
    
    					<div class="greyline">
    				</td>
    			</tr>
    				<tr>
    				<td>
    					<h1>Headline
    					<p>Text
    
    
    				</td>
    			</tr>
    		</table>
    		<table cellspacing="0" cellpadding="0" id="footer">
    			<tr>
        			<td class="text">Teleticket will never pass your email address to any other company. All prices are subject to availability, and Teleticket terms and conditions
    				<td class="unsubscribe">[img]images/button-unsubscribe.gif[/img]
    			</tr>
    		</table>
    	</div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    May 2005
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mumford, I am just starting out with builiding sites, and I am in need of a newsletter code..could I have your code for my site as well..btw, did you anyway figure out what is wrong with your code..?

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mumford,

    I know what is wrong with your code. You are using embedded style sheets. That means style sheets defined between the HEAD tags. Webmail clients like Hotmail, Gmail and Yahoo remove everything between the HTML-tag and the BODY-tag. That is why your CSS doesn't work. You should use inline style sheets definitions:

    Code:
    <p style="font-family: arial, sans-serif; font-size: 11px; color: black">This is text</p>
    Also, don't rely too much on CSS. Use simple CSS for styling your content like colors, fonts, etc. If your target audience is only using a standalone email program like Outlook or Thunderbird, then it's no problem.

    There are several things you should be aware of when creating HTML newsletters. I've written an article about this with a lot of tips and examples:

    Create compatible HTML email

    Anand

  4. #4
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    573
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the link takes you too a page with no content?

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link is a redirect to the article i've written. I had to use a redirect because there is a word in the url that sitepoint doesn't show. But the link works.

    Anand

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you using a meta redirect? Why not use a mod-rewrite or PHP header redirect?

    You've got some good hints there, anandq.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz.

    But if I want to use a PHP header redirect, the link would have to point to a php file. Then I would have to change the link in the forum. If somebody had bookmarked the old url (meta redirect) and wants to visit the link, they would receive a 404 HTTP error.

    Perhaps a mod rewrite is a better option. But if I were to use something like this (I don't know if the code is correct, I haven't tested it):

    RewriteEngine on
    RewriteRule ^redirect/htmlemail\.html$ new.html

    Then the mod rewrite rule seems obsolete. Because the htmlemail.html does the meta redirect already. What is the advantage in this cage to use a mod rewrite?

    Anand

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some people, apparently including mumford1, use browsers that either don't support meta redirects or have them disabled.

    Another option would be to add a link in the HTML page for those who are using browsers that either don't support meta redirects or have them disabled
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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