Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Regular Coder
    Join Date
    Sep 2004
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well start by fixing errors in the code... its <img> not [img]

  • #3
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also closing your tags would help.

    Channy

    I would love to change the world, but they won't give me the source code...


  •  

    Posting Permissions

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