Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS in HTML Email

Options
  • 06-01-2004 9:24pm
    #1
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭


    I've written a newsletter application that is using one of those new fangled WYSIWYG editors.
    That's all working just fine. The template page is displayed perfectly in the editor including all the CSS style markups.

    When I send the newsletter it send it as HTML alright but it doesn't seem to send any of the CSS markup, when I view source in the browser it seems to have stripped everything but the bare bones of the markup.

    Is it a mail client setting?

    If so, how do I write a page so that the email uses the same look and feel as the website?

    Thanks


Comments

  • Options
    #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    Are you using the CSS style inside the html tag:

    htmlBody = htmlBody & "<font face=""verdana"" style = ""font-size:10px"">"

    I mean inside the email body

    or is just for the page as import CSS = <style type="text/css">
    <!--
    @import url("../CSS_BS2000.css");
    -->
    </style>

    or relative link = <link href="../CSS_BS2000.css" rel="stylesheet" type="text/css">


  • Options
    #3
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    I'm using the link tag, but I'm giving an absolute reference to the css file.


  • Options
    #4
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    What program are you using?


  • Options
    #5
    whiteshadow
    Registered Users Posts: 771 ✭✭✭whiteshadow


    You gotta embed the style sheet instead of linking it ( absolute or relative)

    <title>Newsletter</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style>
    A.link:hover {
    COLOR: #003399; TEXT-DECORATION: underline; background: #fff215;
    }
    A.link {
    FONT-WEIGHT: bold; FONT-SIZE: 7pt; COLOR: #000099; FONT-FAMILY: Verdana; TEXT-DECORATION: none;
    }
    A.linkpink:hover {
    COLOR: #0000ff; TEXT-DECORATION: underline; FONT-WEIGHT: bold; background: #ffffff;
    }
    A.linkpink {
    FONT-SIZE: 10pt; COLOR: #47649F; FONT-FAMILY: Verdana; FONT-WEIGHT: bold
    }
    p { FONT-WEIGHT: none; FONT-SIZE: 10pt; COLOR: #003399; FONT-FAMILY: Verdana; TEXT-DECORATION: none; margin-top: -18px}

    p.small { FONT-WEIGHT: none; FONT-SIZE: 6pt; COLOR: #565785; FONT-FAMILY: Verdana; TEXT-DECORATION: none }

    h1{
    font-family: Verdana;
    font-size: 10pt;
    background: #fff215;
    font-weight: bold;
    color: #003399;
    border-bottom: ;
    white-space: nowrap;
    }
    </style>

    <body> etc...

    it'll work then.


  • Options
    #6
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    careful, even embedding it has problems like some mail clients dumping the style stuff out of the head and into the body (esp NS mailer). At times I've actually had to revert to tables and fonts for some newsletters as the box model stuff was refusing to work with reliability. Not good for accessibility.

    As ever, keep it simple and test ad nauseam.


  • Advertisement
  • Options
    #7
    Enygma
    Closed Accounts Posts: 1,651 ✭✭✭Enygma


    Thanks, ended up just using vanilla HTML. Works just fine for what I want.
    Might try embedding the stylesheet though.


Advertisement