frontlawnmaterial Posted May 25, 2015 Share Posted May 25, 2015 Hi All, Please forgive me if I'm posting this in the incorrect area; I'm only new to HTML, CSS & W3 Schools. I am currently creating a email shipping notification that integrates with another system to extract information such as the receiver's address and tracking number in order to advise customers when they should expect freight deliveries. These fields are identified by the paramaters { & } in the code below. I have attached three images for reference. Chrome Output Outlook Output Desired Output (have the div 'bodyright' placed beside 'bodyleft') I don't intend to have the grey background showing; I have just done that to identify div easily. I therefore have the following questions: How do I move div 'bodyright' to be placed beside 'bodyleft'? How do I ensure that the social media icons have a gap separating them? How do I ensure that the group of social media icons are centred as shown in the desired output image? You will also note several comment sections in the code below; this is required as I must modify this template to suit individual customer's needs (who may not have certain social media accounts). Put simply - I would like the code to be written in a way that easily allows me to remove any element after the Sender's Phone number for the email. I hope my questions make sense! <html> <head> <style> #main {text-align:center; max-width: 466px; padding: 0px;} #logo {text-align:center; max-width: 466px; padding: 5px; margin: 0; auto} #header {text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #bodyleft {float:clear; text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #bodyright {text-align:left; min-width: 200px; max-width: 220px; padding: 0px; margin: 0; auto} #signature {float:clear; text-align:left; min-width: 466px; padding: 0px; margin: 0; auto} #footer {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} #social {float:clear; text-align:center; min-width: 466px; padding: 0px; margin: 0; auto} body {font-family: Calibri;} p {margin-left: 10px; margin-right: 10px} .logoimage {content:url("http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg"); align:center; max-width:450px; height:auto;} </style> </head> <body> <div id="main"> <div id="logo"> <img class="logoimage"/> </div> <div id="header"> <p>Dear Valued Customer,</p> <p>Your order has been despatched to:</p> <p>{Receiver}</p> </div> <div id="bodyleft"> <p><b>Tracking Number:</b></p> <p>Reference(s):</p> <p>Freight Description:</p> <p>Additional Instructions:</p> </div> <div id="bodyright"> <p><b> <a href="http://www.companyname.com.au/tracking-tool/?id={Connote}"> {Connote} </a> </b></p> <p>{Reference}</p> <p>{Description}</p> <p>{Instructions}</p> </div> <div id="signature"> <p>Kind Regards,</p> <p>{Sender}.</p> <p>(00) 0000 0000</p> </div> <div id="footer"> <p> <a href="http://www.customerswebsite.com.au" target="_blank"> customerswebsite.com.au </a> </p> </div> <div id="social"> <a href="<!--Replace with Company Facebook URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="<!--Replace with Company Name--> Facebook" hspace="10"> </a> <a href="<!--Replace with Company Google Plus URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/google_plus.png" alt="<!--Replace with Company Name--> Google+" hspace="10"> </a> <a href="<!--Replace with Company Instagram URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="<!--Replace with Company Name--> Instagram" hspace="10"> </a> <a href="<!--Replace with Company LinkedIn URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/linkedin.png" alt="<!--Replace with Company Name--> LinkedIn" hspace="10"> </a> <a href="<!--Replace with Company Pinterest URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/pinterest.png" alt="<!--Replace with Company Name--> Pinterest" hspace="10"> </a> <a href="<!--Replace with Company Twitter URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="<!--Replace with Company Name--> Twitter" hspace="10"> </a> <a href="<!--Replace with Company YouTube URL-->"" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="<!--Replace with Company Name--> YouTube" hspace="10"> </a> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 25, 2015 Share Posted May 25, 2015 That code has zero hope of working across multiple email clients. Each email client has its own rules about what they will accept. Gmail will not permit anything that conflicts with its own stylesheet. Outlook is not even consistent across version. User preferences may limit or block HTML, and some clients by default will block html. Plus spam filers may dump it into a spam folder. You need to look at: https://www.campaignmonitor.com/css/ where you will find a matrix that should make it clear that you are not going to meet your goal, and if you manage to get it so 60% of the email you send that way is readable you will be doing well. The only certain way you have of the email being delivered as you have sent it is to use straight text. 1 Link to comment Share on other sites More sharing options...
frontlawnmaterial Posted May 25, 2015 Author Share Posted May 25, 2015 Thanks COBOLdinosaur - that matrix will cetainly help me in the future. I'd prefer to use something a little more dynamic, but since it doesn't look possible, do you suggest using a table(s) instead? Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted May 26, 2015 Share Posted May 26, 2015 Generally tables are not used for layout except for email where they are often a good alternative. Using a table will mean you don't have to use a lot of CSS and that is the thing the email client mess ut the worst. The trick is to keep it very simple and basic like you are still in the 20th century because email clients are 20th centrury technology that has not evolved very much in terms of presentation capabilities. Link to comment Share on other sites More sharing options...
davej Posted May 26, 2015 Share Posted May 26, 2015 I'm not sure what you want, since a 466px width is very small, but this seems closer... As COBOL says above... only testing will tell you whether the various email services will actually display this. <html> <head> <style> #logo,#main,#header,#bodyleft,#bodyright,#signature,#footer{background-color:#aaa;border:1px dotted #000;} #main {text-align:center; width: 466px; padding: 0px;} #logo {text-align:center; padding: 5px; margin: 10px;} #header {text-align:left; padding: 0px; margin: 10px;} #bodyleft {float:left; text-align:left; width: 220px; padding: 0px; margin: 10px 0 10px 10px;} #bodyright {float:right; text-align:left; width: 220px; padding: 0px; margin: 10px 10px 10px 0;} #signature {clear:both; text-align:left; padding: 0px; margin: 10px;} #footer {text-align:center; padding: 0px; margin: 10px;} #social {text-align:center; padding: 0px; margin: 10px;} body {font-family: Calibri;} p {margin: 10px} .logoimage {content:url("http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg"); text-align:center; width:426px;} #social a{display:inline-block;text-align:center;} </style> </head> <body> <div id="main"> <div id="logo"> <img class="logoimage"/> </div> <div id="header"> <p>Dear Valued Customer,</p> <p>Your order has been dispatched to:</p> <p>{Receiver}</p> </div> <div id="bodyleft"> <p><b>Tracking Number:</b></p> <p>Reference(s):</p> <p>Freight Description:</p> <p>Additional Instructions:</p> </div> <div id="bodyright"> <p><b> <a href="http://www.companyname.com.au/tracking-tool/?id={Connote}"> {Connote} </a> </b></p> <p>{Reference}</p> <p>{Description}</p> <p>{Instructions}</p> </div> <div id="signature"> <p>Kind Regards,</p> <p>{Sender}.</p> <p>(00) 0000 0000</p> </div> <div id="footer"> <p> <a href="http://www.customerswebsite.com.au" target="_blank"> customerswebsite.com.au </a> </p> </div> <div id="social"> <a href="<!--Replace with Company Facebook URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="Facebook"/> </a> <a href="<!--Replace with Company Google Plus URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/google_plus.png" alt="Google+"/> </a> <a href="<!--Replace with Company Instagram URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="Instagram"/> </a> <a href="<!--Replace with Company LinkedIn URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/linkedin.png" alt="LinkedIn"/> </a> <a href="<!--Replace with Company Pinterest URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/pinterest.png" alt="Pinterest"/> </a> <a href="<!--Replace with Company Twitter URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="Twitter"/> </a> <a href="<!--Replace with Company YouTube URL-->" target="_blank"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="YouTube"/> </a> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
frontlawnmaterial Posted May 27, 2015 Author Share Posted May 27, 2015 Good point COBOLdinosaur... I certainly didn't realise that it differed between between browsers / email clients so much. I think I'll go with this method for the interim, and perhaps investigate methods with CSS when technology catches up! davej - I made the width of the output so small, as I am still running one of those old square 13" monitors at work! I really like your dotted line method, and how you defined the CSS more effectively. Also I was unaware of being able to define multiple CSS ID selectors to have the same appearance. Thanks for your help! Link to comment Share on other sites More sharing options...
dsonesuk Posted May 27, 2015 Share Posted May 27, 2015 (edited) css3 styling (control:) is very unlikely to be supported, and i don't know if it is still carried out still! but Gmail used to strip out <head></head> tags completely so placing styljng there would be useless. That is why tables and inline styling is used within html tags within body.Note: outlook, gmail were a major pain. Edited June 1, 2015 by dsonesuk 1 Link to comment Share on other sites More sharing options...
frontlawnmaterial Posted June 1, 2015 Author Share Posted June 1, 2015 (edited) Hi again, So version two is below, and I've almost got it to function 100% properly in several browsers and email clients. The only parts I consider as not working are the vertical spaces between the following three locations: {Receiver} and 'Tracking Number' {Instructions} and 'Kind regards' 'Special Account Notices Go Here' and 'customerwebsite.com' In addition to also defining a horizontal space between each social media icon. Screenshot here. Any ideas or suggestions on how to improve the code? Thanks again! <html> <body> <table width="500" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"> <p align="center"><img src="http://mostlywebsites.net/wp-content/uploads/w3schools-logo.jpg" width="500" alt="Customer Logo"/></p> <p><font face="Calibri">Dear Valued Customer,</font></p> <p><font face="Calibri">Your order has been despatched to:</font></p> <p><font face="Calibri">{Receiver}</font></p> </td> </tr> <tr> <td width="230"> <p><font face="Calibri"><b>Tracking Number:</b></font><p> </td> <td width="270"> <font face="Calibri"><b>{Connote}</b></font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Reference(s):</font> </td> <td width="270"> <font face="Calibri">{Reference}</font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Freight Description:</font> </td> <td width="270"> <font face="Calibri">{Description}</font> </td> </tr> <tr> <td width="230"> <font face="Calibri">Additional Instructions:</font> </td> <td width="270"> <font face="Calibri">{Instructions}</font> </td> </tr> <tr> <td colspan="2"> <p><font face="Calibri">Kind regards,</font></p> <p><font face="Calibri">Customer Name</font></p> <p><font face="Calibri">1800 000 000</font></p> <p><font face="Calibri"><b>Special Account Notices Go Here</b></font></p> </td> </tr> <tr> <td colspan="2"> <p align="center"> <a href="http://www.w3schools.com/"><font face="Calibri"><b>customerwebsite.com</b></font></a> </p> <p align="center"> <a href="https://twitter.com/<!--Twitter Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/twitter.png" alt="<!--Customer Name--> Twitter" align="center"></a> <a href="http://youtube.com/<!--YouTube Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/youtube.png" alt="<!--Customer Name--> YouTube" align="center"></a> <a href="https://www.facebook.com/<!--Facebook Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/facebook.png" alt="<!--Customer Name--> Facebook" align="center"></a> <a href="http://instagram.com/<!--Instagram Account-->"> <img src="http://www.imagelocation.com.au/Downloads/ASN-Images/instagram.png" alt="<!--Customer Name--> Instagram" align="center"></a> </p> <p align="center"> <a href="http://www.customerwebsite.com/shipping-and-returns"><font size="2" face="Calibri"><b>Freight Terms & Conditions</b></font></a> </p> </td> </tr> </table> </body></html> d Edited June 1, 2015 by frontlawnmaterial Link to comment Share on other sites More sharing options...
dsonesuk Posted June 1, 2015 Share Posted June 1, 2015 try adding style="padding:5px;" or line-height, or margin, should work. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now