Beginner HTML - Newsletter for Outlook
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
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"
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.
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.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)