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 to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS problem when integrating html into emails

    CSS problem, I have created an email template to send out to clients, which uses built in css. It works fine when sending to outlook express users but when sent to hotmail it does not load the css. (And looks very flat)

    I would be gratefull if somebody could help me fix this problem if it is something wrong with my code (which it must be as I've seen other emails sent to hotmail where the css works.)

    Here is the code which I then paste into the source function when composing an email in Outlook Express

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>xxxxxxxxxxxxxxxxxxxx</title>
    
    <style type="text/css">
    
    a:link {color:#BDBDBE} 
    a:visited {color:#BDBDBE} 
    a:focus {color:#BDBDBE} 
    a:hover {color:#8FC6FC} 
    a:active {color:#BDBDBE}
    
    body {background-color:#ebf5ff;}
    
    hr {color:#FAD040;}
    
    #title	{
    	font: 16px  "Verdana", "Arial", "Helvetica", "sans-serif";
    	color:#8FC6FC;
    	font-weight:bold;
    }
    
    div	{
    	text-align:justify;
    	font: 10px  "Verdana", "Arial", "Helvetica", "sans-serif";
    	color:#666666;
    }
    
    #email	{
    	font: 9px  "Verdana", "Arial", "Helvetica", "sans-serif";
    	color:#BDBDBE;
    }
    .savoir	{
    	font: 18px  "Arial Black", "Arial", "Helvetica", "sans-serif";
    	color:#999999;
    	text-align: center;
    }
    .follow	{
    	font: 12px  "Arial Black", "Arial", "Helvetica", "sans-serif";
    	color:#000000;
    	text-align: center;
    }
    </style>
    
    </head>
    
    <body>
    
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
    
    <td NOWRAP>
    <div id="email">
    <p align="left">xxxxxxxxxxxxxx<br> 
    Website: <a href="xxxxxxxxxxxxxxxxxx" target="_blank">xxxxxxxxxxxxxxxxxxx
    </a><br>
    Email: &nbsp;&nbsp;&nbsp;&nbsp;<a href="xxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxxx</a><br></p>
    </div>
    </td>
    
    <td NOWRAP>
    <div class="savoir">
    xxxxxxxxxxx<br>
    </div>
    <div class="follow">
    &nbsp;xxxxxxxxxxxxxxxxx&nbsp;
    </div>
    </td>
    
    <td NOWRAP>
    <div id="email">
    <p align="right">Tel: xxxxxxxxxxxxxxxxxx<br>
    Mobile: xxxxxxxxxxxxxxx<br>
    Fax: xxxxxxxxxxxxxxx
    </p></div>
    </td>
    </tr>
    
    <tr>
    <td colspan="3">
    <hr noshade width="90%">
    </td>
    </tr>
    
    <tr>
    <td colspan="3">
    <br>
    <div id="title">
    Title will go here if you have one
    </div><p>
    </p><div>
    All your paragraphs of text will go here
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </div>
    
    </td>
    </tr>
    
    </table>
    
    </body>
    </html>

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,747
    Thanks
    18
    Thanked 155 Times in 146 Posts
    In general, and in my experience, when creating HTML emails, you;re going to run into problems with your CSS because mail applications react differently to style sheets, much like browsers do...The only difference between mail apps and browsers is that there are a zillion different common mail applications (as opposed to only a few common browsers), that are all programmed differently, and subsequently all render CSS slightly differently....And in some applications, CSS is not recognized at all...

    When I do HTML emails, I try to stick to really basic HTML transitional code with minimal CSS...this means formatting HTML emails with tables instead of CSS positioning, and using <font> tags to accomplish a large portion of your text formatting...it's not pretty, but I've found that by formatting my emails this way, they are more likely to work and appear similarly in a wider range of mail applications...

    And you should also definitely, definitely, definitely have a text-only version of your email that will load if the HTML formatting fails to load or is incapable of loading in certain mail apps....this way, the reader will at least see something ledgible, as opposed to nothing at all....

    I would recommend a robust PHP application like PHPMailer for your emailing...it works well for me....Check it out HERE

    good luck and hope this helps a little!
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Yes thanks that is very helpfull. I will take that into account and am going to have to create a html versions.


  •  

    Posting Permissions

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