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
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts

    HTML emails with CSS.

    I need to create a newsletter which emails people a HTML email

    It needs to roughly look like the image i attached.

    Is there a best method for creating HTML emails and use CSS styling?

    Also is the a special way to use images or do i just link to the using the full http path?

    Is the a problem with background-image? It never seems to work for me in an email.
    Attached Thumbnails Attached Thumbnails HTML emails with CSS.-newsletter-artwork.jpg  

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    or markup in the original test email, I utilized a blend of CSS and traditional techniques (Tables, etc.). Take the following markup from the original test-email whereby I used a Table for presentation [shudder] and a TD background to ensure the background would appear even in clients offering poor CSS support:

    ‹td width="28" background="imagepath"›‹img src="imagepath" width="28" height="25" /›‹/td›

    This approach was a compromise, offering extended use of CSS and ensuring design integrity across the board. I have since matured my approach, however, employing fully-semantic markup (my standard practice for websites). Consider the following example:

    ‹div id="Title"›
    ‹h1›National Adoption Day‹/h1›
    ‹h2›‹a href="url"›Learn more‹/a›‹/h2›
    ‹/div›

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    824
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Ive more or less got the email working, it works for Outlook, Apples Mail however hotmail is being a pain

    I've set a td's height to 150px in my mark up, both using style="height:150px;" and height="150" however using firebug i get the elements height being 181.520px and another td marked p to 120px is actaully rendering at 148px. Is the anyway i can say "Do my CSS rules and ignore all of hotmails" (i assume is a hotmail CSS style causing this?)

    EDIT: After removing the sizes from my td's and just leaving them on the img inside the td the size has gone from 181 down to 158px, still too big but for some reason its shrunk
    Last edited by tomharto; 02-20-2012 at 11:30 AM.


  •  

    Posting Permissions

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