dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Beginner HTML - Newsletter for Outlook

  1. #1
    Join Date
    Apr 2015
    Posts
    2

    Beginner HTML - Newsletter for Outlook

    Hi all,

    Been lurking but first post.

    Very recently started coding - about a month into it. Learning alot everyday and am pretty good at generally figuring out the issues and from trial and error + google can get through what I need to do. This week was asked to code an internal newsletter and I have hit a brick wall. Since our internal client is Outlook 2013 is has to work perfectly on this and this only really.

    So I did a lot of research into coding for outlook because I knew it was a really difficult program to code for. I have tried to code the whole thing using tables, avoided using divs and floats etc. There are two instances where I have used cellpadding instead of tablerows and columns to seperate things, in the Sales & Projects section and in the Upcoming Seminars bit.

    This is just a barebones draft getting the template right before I focus on the content but I am running into issues when it renders in outlook to send and have no idea what I can do to fix it.

    I apologise for the shambles I have written and appreciate any and all help/advice on what I can do to fix the code or make life easier for myself.

    The code itself: http://codepen.io/JoeLittleworth/pen/PwMLvj

    What it looks like in outlook: http://www.hsec.co.uk/uploads/images...Newsletter.JPG

    Thanks,

    Joe

  2. #2
    Join Date
    Mar 2012
    Posts
    2,751
    Hi and welcome. hopefully someone more proficient in coding for Outlook will comment, but my immediate thoughts were that you are coding for HTML 5. I suspect you should code for HTML 3.2 (or possibly 4.01). The WDG validator is here, and it contains links to the WDG references for HTML 3.2 and 4.01, which are excellent guides.

    So some things that I suspect need to change are:

    1. The doctype. Try (for 3.2):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

    or (for 4.01):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    2. The charset. Try:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    3. I'm pretty sure you should not use <tbody> if there is no <thead>, but I could be wrong!
    Last edited by jedaisoul; 04-16-2015 at 07:03 AM.

  3. #3
    Join Date
    Apr 2015
    Posts
    2
    Thankyou jedaisoul, really appreciate the help.

    After edit image: http://www.hsec.co.uk/uploads/images...sion%20002.jpg

    After edit code: http://codepen.io/JoeLittleworth/pen/gbVJLq?editors=100

    So fixed some things on it, that validator is a fantastic tool thankyou for that.

    Still having a few issues, its like some of my spacing columns and rows are appearing invisible. Also the places i have used line height eg. "March Internal newsletter" are overlapping each other.

    I originally followed a few general guides on how to produce newsletters for outlook and their code generally didnt use headers so I assumed it was ok. Maybe it was in situations I didn't read correctly.

    Again thankyou for the help.

  4. #4
    Join Date
    Mar 2012
    Posts
    2,751
    1. Why have you chosen XHTML?

    2. HTML 3.2 (which I suggested you use) supports only <table> <caption> <th> <tr> and <td>, i.e. it has no <tbody> tag.

    3. Error on line 17.

    4. Instead of line-height, try padding.
    Last edited by jedaisoul; 04-16-2015 at 12:42 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles