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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Can I use CSS with ASP?

    Hello

    I have the following snippet of ASP script which needs tidying up with a little help from CSS. The problem is that I am not too sure where to start tidying it up.


    myMail.Subject="Your message to company name"

    myMail.HTMLBody="Your message." & vbcrlf & vbcrlf & _

    "Please do not reply to this email" & vbcrlf & "<br><br>" &_

    "<B><font face='verdana' size='2' color='navy'>Full name:</font></B> " & sname & vbcrlf & "<br>" &_

    "<B><font face='verdana' size='2' color='navy'>Email</font></B>: " & sEmailAddress & vbcrlf & "<br>" &_

    "<B><font face='verdana' size='2' color='navy'>Business</font></B>: " & sbusinessTitle & vbcrlf & "<br>" &_

    "<B><font face='verdana' size='2' color='navy'>Country</font></B>: " & sCountryName & vbcrlf & "<br>" &_

    "<B><font face='verdana' size='2' color='navy'>Message</font></B>: " & MessageTitle & vbcrlf

    How would I begin to remove the following line and replace it with CSS:


    <B><font face='verdana' size='2' color='navy


    and how would I apply CSS to the text message after the two top lines (myMail.Subject and myMain.HTMLBody)?

    At the moment it all looks a bit cumbersome and I would appreciate some guidance, please.

    Many thanks.

    Steve

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    You can use CSS only in combination with HTML. ASP is for the server side scripting and CSS is only to style the HTML output after ASP has processed everything.

    So, basically: WYSIWYCS – what you see is what you can style. If you view the output source code in your browser, that’s what CSS can style.

    At first replace the deprecated HTML code that is generated by the function itself. You should have semantics in mind when you think about the best markup. Since I don’t know what you intend it’s a little hard to say what you should do but you could use a definition list.

    So, it would probably look something like this (I don’t know how to write a new line in ASP… – also, the wrapping <dl> and </dl> tags are supposed to appear only once):
    Code:
    "<dl>"
    
    "<dt>Full name:</dt> <dd>" & sname & vbcrlf & "</dd>" &_
    
    "<dt>Email</dt>: <dd>" & sEmailAddress & vbcrlf & "</dd>" &_
    
    "<dt>Business</dt> <dd>: " & sbusinessTitle & vbcrlf & "</dd>" &_
    
    "<dt>Country</dt>: <dd>" & sCountryName & vbcrlf & "</dd>" &_
    
    "<dt>Message</dt>: <dd>" & MessageTitle & vbcrlf "</dd>"&_
    
    "</dl>"
    Basically your output should look something like this:
    Code:
    <dl>
      <dt>Full name:</dt>
      <dd>John Doe</dd>
      <dt>Email</dt>
      <dd>test@example.com</dd>
      <dt>Business</dt>
      <dd>Doe Inc.</dd>
      … etc. …
    </dl>
    And you style that list by creating a new CSS file and putting like:
    Code:
    dt {
      font-weight: bold;
      color: navy;
    }
    dd {color: green;}
    … or something like this in it. Remember, you’re styling the HTML output, not the ASP code.

    Then you link to tha CSS file in the head section of the HTML document:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
    </head>

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Wow! That's very informative, Stephan.

    I'll go through it and use it, but it seems to make sense.

    Many thanks for your time.

    Cheers

    Steve

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Stephan

    I have tried your code and though it looks tidier, it gives me, in my inbox:

    <dd>Your message to graphic</dd>

    Your message.
    Please do not reply to this email


    Full name:
    Dimi Day

    Email:
    dim03@aol.com

    Business:
    business

    Country:
    Syria

    Message:
    THURS test feedback1 FLA

    That is, the titles and the content are on different lines as in:

    Country:
    Syria

    and there are no colours or bold formatting. Please also note the <dd> as in:

    <dd>Your message to graphic</dd>

    ---------

    I am trying to get it so that it looks more like this:

    Your message to graphic

    Your message. Please do not reply to this email

    Full name: Dimi Day
    Email: dim03@AOL.com
    Business: business
    Country: UK
    Message: graphic TEST 14.06

    The code I have at the moment is:

    <style type="text/css">

    dt {
    font-weight: bold;
    color: navy;
    font-family: Verdana, serif
    font-size: 10px
    }

    dd {
    font-weight: normal;
    color: black
    font-family: Verdana, serif
    font-size: 10px

    </style>

    and in the body of the HTML file I have:

    myMail.HTMLBody="<dd>Your message.</dd>" & vbcrlf & vbcrlf & _

    "<dd>Please do not reply to this email</dd>" & vbcrlf & "<br><br>" &_

    "<dt>Full name</dt>: <dd>" & sname & vbcrlf & "</dd><br>" &_

    "<dt>Email</dt>: <dd>" & sEmailAddress & vbcrlf & "</dd><br>" &_

    "<dt>Business</dt>: <dd>" & sbusinessTitle & vbcrlf & "</dd><br>" &_

    "<dt>Country</dt>: <dd>" & sCountryName & vbcrlf & "</dd><br>" &_

    "<dt>Message</dt>: <dd>" & MessageTitle & vbcrlf & " </dd><br>"


    Many thanks for your time.

    Steve

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Hi Steve,

    Well, after reading this thread again, I realized that I was a little sloppy with my advice. I just get that you seem to be trying yourself on an HTML e-mail, do you? The thing with HTML e-mail is that it’s the least reliable thing that there is when it comes to markup and styling as different Mail applications have different (i.e. barely no) support for it.

    Now, while it’s not at all hard to get the title and related content next to each other (by floating the dts to the left and also clearing the floats) it might just be better to use a table here since this is the most widely supported structure by e-mail applications. So the respective code would be something like:

    Code:
    myMail.HTMLBody="<h1>Your message.</h1>" & vbcrlf & vbcrlf & _
    "<p>Please do not reply to this email</p>" & vbcrlf & "<br><br>" &_
    "<table><tr><th scope="row">Full name:</th> <td>" & sname & vbcrlf & "</td></tr>" &_
    "<tr><th scope="row">Email:</th> <td>" & sEmailAddress & vbcrlf & "</td></tr>" &_
    "<tr><th scope="row">Business:</th> <td>" & sbusinessTitle & vbcrlf & "</td></tr>" &_
    "<tr><th scope="row">Country:</th> <td>" & sCountryName & vbcrlf & "</td></tr>" &_
    "<tr><th scope="row">Message:</th> <td>" & MessageTitle & vbcrlf & " </td></tr></table>"
    so that the output looks somewhat like this:
    Code:
    <table>
      <tr>
        <th scope="row">Full Name:</th>
        <td>John Doe</td>
      </tr>
      <tr>
        <th scope="row">E-mail:</th>
        <td>test@example.com</td>
      </tr>
      <tr>
        <th scope="row">Business:</th>
        <td>Doe, Inc.</td>
      </tr>
     … etc. …
    </table>
    Also, support for external CSS is limited so although it’s not as feasible the best is to style it with inline styles, i.e. add a style attribute to each cell an put the styles there like:

    Code:
    "<tr><th scope='row' style='font: bold 10px Verdana, Arial, sans-serif; color: navy;'>Email:</th> <td style='font: normal 10px Verdana, Arial, sans-serif; color: black;'>" & sEmailAddress & vbcrlf & "</td></tr>" &_
    You’ll get the point. There are several articles on HTML e-mail and the do’s and don’ts on the internet. Basically there's not much choice so far.

  • #6
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    If you want some additional advice on HTML emails, there's quite a good free PDF guide at Mail Chimp which I refer to on a regular basis.

    Just hope and pray that you're not sending anything to anyone using Lotus Notes or MS Outlook 2007. They're just plain evil in the way they render HTML.
    If anyone asks my boss, this counts as work, okay?

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Stephan and Butlins

    Many thanks for your posts (I have downloaded the pdf file, thanks, and at 65 pages it should make good bed-time reading).

    I will try the code, Stephan, many thanks for your time, and post back to let you know how I get on!.

    Cheers

    Steve


  •  

    Posting Permissions

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