Rounded Corner Not Showing in Table - html

I have this table and was trying to add rounded corners to it, but nothing happens. Could someone take a look and tell me where I'm going wrong? The size of the corner images are 14px each.
Any help would be appreciated greatly.
<table cellpadding="0" cellspacing="0" >
<tr bgcolor="#e4322d" style="line-height: 0px">
<td width="14px" height="14px"><img src="red1.png" width="14px" height="14px" alt=""></td>
<td width="430" style="font-size: .2em"> </td>
<td width="14px" height="14px"><img src="red2.png" width="14px" height="14px" alt=""></td>
</tr>
<tr bgcolor="#e4322d">
<td width="14px" style="font-size: 1px"> </td>
<td width="430" bgcolor="#e4322d" align="center" style="color: white; font-size: 16px"><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF;"><br>Come swim in our latest pool.<br><br></span></td>
<td width="14px" height="14px" style="font-size: 1px;"> </td>
</tr>
<tr bgcolor="#e4322d" style="line-height: 0px">
<td width="14" height="14"><img src="red3.png" width="14" height="14" alt=""></td>
<td width="430" style="font-size: 0px;" height="2"></td>
<td width="14px" height="14"><img src="red4.png" width="14" height="14" alt=""></td>
</tr>
</table>

The real problem is that you are going complete overkill on the HTML for this. You can make the whole thing simply with this HTML:
<div class="banner">Come swim in our latest pool.</div>
And add this CSS which takes care of all the styling:
.banner {
width: 450px;
padding: 35px 0;
background: #E4322D;
border-radius: 14px;
text-align: center;
font-size: 16px;
color: #FFF;
}
It looks like you aren't using CSS, and are using the very old-fashioned and long outdated HTML technique of making everything with tables. There is no need. I would take the time to quickly learn CSS. It will change your life! Start here; it's easy to learn:
http://www.w3.org/wiki/CSS/Training/What_is_CSS
And by using CSS and having a global stylesheet for your site, you will be able to reuse styles without having to write new code for it every time. For example, you could have multiple banners that look the same as your "Come swim in our latest pool" one simply by giving them the same class:
<div class="banner">Come swim in our latest pool.</div>
<div class="banner">Also, check out this!</div>
<div class="banner">Hey, this box looks the same as the other two!</div>

Related

How to align a text link next to an image link in a table row with inline styles only?

I'm having an issue aligning text and an image link next to each other in a table row. The image keeps drifting up and down. I've tried various align middle and display block styles with no luck. I am limited to only having CSS inline and trying to display properly across different devices and desktop email clients. The posted code is a nested table that I can not get the elements to align with each other. Viewing the code in the browser, for the most part, displays correctly. But once the code is in Outlook and other programs the image drifts within the row.
image example
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11">
</td>
</table>
This is very simple and when tested with Litmus it has consistent results across all email clients. I set the font size, line-height and image size to 13px. Since they were all equal, it made it easier to align. I didn't put an align on the table because it should default to middle-align. On the image I placed vertical-align: -2px; Outlook has buggy support when it comes to using values like middle, but not with number values. in the style sheet and added display: inline-block;. I placed everything in one <td>.
With Gmail, Apple, IOS, Android and other email clients, everything remains consistent. With Outlook, it shifts about a pixel.
I also added text-decoration: none; to the hrefs to clean up the look a bit.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
555-555-5555 |
stackoverflow.com |
<img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13">
</td>
</tr>
</table>
Good luck.
I would use valign="bottom" for all tds, and in addition add some padding-bottom to the img tag to correct the slight vertical offset between text and image (actually only 1px in this particular example):
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
555-555-5555 |
</td>
<td height="100%" align="left" valign="bottom">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</table>
writing html for email is like a trip back to the 90ies!
if you wrap all your <td> inside a tabelrow <tr> and set it's valign to bottom,
just run the code snippet:
<table cellspacing="0" cellpadding="0">
<tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</tr>
</table>

HTML table doesn't display correctly in Outlook

I am creating HTML table in Outlook email to make it look like a template example like this,
However the one I created isn't match like it should be. There are 3 issues,
first Manage Information Technology at top right is shift down instead of suppose to be equal position as black box logo like an example template from above.
Second, ServiceNow - Release Notes aligned on left instead of center even though I already have align="center" in <td>.
Third, the black border line locate below orange banner disappear but the snippet code and the outlook preview is showing it but the actual outlook is not.
Here is 2 images of incorrect outlook display,
<table style="height: 643px;" width="772" cellspacing="0" cellpadding="0">
<tbody>
<tr style="border-style: none none solid none;">
<td colspan="2"><span style="font-family: 'times new roman', times;"><img id="logo" style="float: left;" title="" src="toolbar-logo.png" alt="" width="127" height="44" /></span></td>
<td colspan="2">
<p style="text-align: right;"><font face="calibri, times"><span style="font-size: 18.6667px;"><font color="red"><strong>Manage Information Technology</strong></font></span>
</font>
</p>
</td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><font size="7" face="calibri"><strong>ServiceNow - Release Notes</strong></font></td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><img id="dss-banner" src="DSSbanner.png" alt="" width="100%" height="161" /></td>
</tr>
<tr>
<td style="background: none; border-bottom: 4px solid #000000; height: 2px; width: 100%; margin: 0px 0px 0px 0px;" colspan="4"><span style="font-family: 'times new roman', times;"> </span></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Team,</span></td>
</tr>
<tr>
<td colspan="4"><span style="font-family: 'calibri', times;"><span style="font-size: 12pt;">The following capabilities and improvements have successfully been promoted to the production ServiceNow instance through "${short_description}" on ${mail_script:release.stories.email.date}.<br />The release notes have also been added in the Release Notes Knowledge Article per standard process.</span></span>
</td>
</tr>
<tr>
<td>${mail_script:release.stories.email}</td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Thank you,<br />Service Management</span></td>
</tr>
</tbody>
</table>
Can anyone point where where possible reason why it didn't match correctly?

Styling button with border & offset using email HTML

I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:
Since it's for an HTML email, mainly tables will be used.
Using negative margins will probably not be compatible with different mail clients.
Note the white border around the button
Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.
Here's my set-up: http://jsfiddle.net/ZHkdV/
Here you go - only need a 30x30 image for the top corner:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
<tr>
<td width="30" height="30">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
</td>
<td width="240" height="30">
</td>
<td width="30" height="30">
</td>
</tr>
<tr>
<td width="30" height="160">
</td>
<td width="240" height="160" valign="top">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
<br>
some text here
</font>
</td>
<td width="30" height="160">
</td>
</tr>
<tr>
<td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
<a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
<td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
BUTTON
</font>
</td>
</a>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
</tr>
<tr>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should hold up in all clients...
For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.
Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.
Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.
The html email Boilerplate is pretty much bulletproof.
http://htmlemailboilerplate.com/
<table> <!- Wrapper ->
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Background images aren't very compatible either:
http://www.campaignmonitor.com/css/
I would just slice the last row into 3 separate images (left, button, right).
If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.

HTML e-mail template

I know this is pushing reality a bit, but I need to ask this question...
Is it possible to have a fixed background image with no-repeat on, and with a table in front of the image?
My problem at the moment is, that if the table in front of the current image gets to long, (longer than the image height) then the image repeats it self downwards and it looks really ugly and unprofessional.
Div is out of the question, it doesn't work with e-mails that well.
The image is basically from top to bottom a black to light blue shade image.
below is the html template i'm using to merge with my outlook email.
<body style="background: transparent url(<MY IMAGE>;);">
<table align="center" border="0" cellpadding="0" cellspacing="0" width=700">
<tbody style="text-wrap:normal;word-wrap:break-word">
<tr>
<td>
<font face="Verdana"><img height="20" src="<MY IMAGE>" style="width: 700px; height: 20px;" width="1" /></font></td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="80" src="<MY IMAGE>" style="width: 750px; height: 80px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding: 10px;">
<p>
<span style="font-size: 14pt;"><strong><span style="color: rgb(0, 0, 128);"><font face="Verdana">Place Heading here.</font></span></strong></span><br />
<br />
<span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;">Place text here.
Place text here.Place text here.
<br />
<br />
</span></span></p>
</td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="90" src="<MY IMAGE>" style="width: 750px; height: 90px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#83B5D4" style="font-size: 9px; color: rgb(255, 255, 255);">
<font face="Verdana"><img height="10" src="<MY IMAGE>" style="width: 10px; height: 10px;" width="10" /></font></td>
</tr>
<tr>
<td align="center" bgcolor="#162C76" style="padding: 10px;" valign="middle">
<font color="#FFFFFF" face="Verdana" style="font-size: 10px; line-height: 1.5em;">Tel: +27 11 454 1074 | Fax: +27 11 454 1073 | support#psiber.co.za | www.psiberworks.com<br />
15 Seventh Avenue, Edenvale, 1610</font></td>
</tr>
</tbody>
</table>
</body>
The way I got around this was to add a load of colored padding to the image at the bottom. The cell will hide all this until it is pushed down and you don't have to worry about CSS styles not working in various email browsers.
Background images are a pain in a lot of email browsers. You can however 'hack' them into Outlook 2007 if you really need to - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/

Insert Image in Center of Table

I Wonder if anyone can help me. I just started working with CSS and was looking to replicated one of the pages of a newsletter I saw. My main problem is that I can't seem to be able to insert the arrow image made with lots of people into the center of the page.
I have used lots of tables and inserting the image in a row breaks the page.
Would really appreciate your help.
Here's my code:
<html>
<head></head>
<body>
<table style="border: 1px solid #223e86;" border="0" width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
---------------------INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW------------------
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
LOT is proud to be launching <i>LOT
Careers</i>. This tailor-made online portal
will provide members and trainees with
free access to browse and apply for the
largest single source of LOT,
jobs worldwide.
<p />
As an LOT member you will be
able to search job vacancies relevant
to your qualification, geographical
location and sector. The site will also
offer comprehensive guidance, advice
and developments in the financial
recruitment process and with your career
management.</td>
<td>
<H2 style="font-family: Verdana,Geneva,sans-serif; font-size: 20px; text-transform:uppercase; color: #B00000; font-weight:bold;">FEATURES:</H2>
<pre style="font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
* Expert careers content (news, videos,
articles, advice and information)
* Find out about the recruitment market
in a destination of your choice
* Search vacancies by job title, skills
required, region or LOT status
* Sign up to receive tailored email alerts
when relevant jobs are posted
* Upload and store your CV
* Apply for jobs with one click
* Debate the latest topics in the
Think Tank with other professionals
in the industry
</pre></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="padding-left: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 13px;">
<i>LOT Careers</i> will also provide access to
thousands of LOT qualified jobseekers
for any organisation looking for the best
new talent.
</td>
<td style="padding-right: 12px; font-family: Verdana,Geneva,sans-serif; font-size: 11px; text-transform:uppercase; color: #B00000; font-weight:bold;">
Pre-register today at www.oursite.com
whether you’re interested in making
your next career move, or want to recruit
your next employee
</td>
</tr>
<tr><td> </td></tr>
<!--third one-->
<tr>
<td>
</td>
</tr>
<!--
<tr><td> </td></tr>
<!--forth one-->
<td colspan="7">
<table border="0" width="200" align="center" cellpadding="0" cellspacing="0">
<tr>
</tr>
<table>
<tr>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/MP_Finance_220110_opt.gif" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/RMS_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/bbc-120x60_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/STATESTREET_opt.jpeg" alt="Smiley face" />
</td>
<td>
<img style="border:1px solid #021a40;" src="Memberslogo-web-images/logo_opt.jpeg" alt="Smiley face" />
</td>
</tr>
</table>
<!--Footer-->
<table>
<tr>
<td width="600" bgcolor="#828279" colspan="7" style="padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px" align="center">
<p><span style="font-family: Verdana,Geneva,sans-serif; color:#FFFFFF; font-size: 23px;">
Pre-register today at <a style="text-decoration:none" href="">www.oursite.com</a>
</span></p>
</td>
</tr>
</table>
</table>
</body>
</html>
Here's the image I want to insert in that column: http://i.stack.imgur.com/DvQ7F.jpg
table rows are not allowed to have content directly, you'll want to enclose the image within a td that has a column span of 2:
<tr>
<td colspan="2">
-----INSERT IMAGE IN THE CENTER OF ONE COLUMN ROW-------
</td>
</tr>
In addition, take care with your comments. Here you have an unclosed comment that will likely make the display of the code following this block unpredictable:
<!--
<tr><td> </td></tr>
<!--forth one-->