Text goes out from the image - html

<table align="center" width="300px" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 300px 30px; background-position: center; background-repeat: no-repeat; background-color:green;">
<tr>
<td>
<p style="color:#000000; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 12px; line-height:30px; font-family: \Montserrat\', sans-serif;">SUNDAY 6TH DECEMBER, 2015</p>
</td>
</tr>
</table>
When I see in Gmail , It looks like this.
and if I write two dates, then it goes beyond the image.
How can i fix it?

you can put conditions in such case.
like when you have one date then give width according to your need and when you have two dates then give width respectively.
this may solve your issue.

Is this you looking for ?
Try to give width: 100% then you can easily add two dates.
Or
You can try to increase the height.
Check here :
<table align="center" width="300px" cellspacing="0" cellpadding="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background: url(http://www.hubilo.com/theme/6/img/ribbon1.png); background-size: 300px 70px; background-position: center; background-repeat: no-repeat; background-color:green;">
<tr>
<td>
<p style="color:#000000; text-align: center; font-weight:100 !important; text-transform: uppercase; font-style: normal; letter-spacing: 1px; font-size: 12px; line-height:30px; font-family: \Montserrat\', sans-serif;">SUNDAY 6TH DECEMBER, 2015 <br> SUNDAY 7TH DECEMBER, 2015</p>
</td>
</tr>
</table>

Related

HTML Emailer border issue

I have created a HTML email and seem to be having issues on some outlooks and mobile outlook with the table cells borders I have attached an image of the issue there seems to be a thin lines where the table cells are.
CSS
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; }
table td { border-collapse: collapse; font-family: Arial,sans-serif; line-height:1.4 }
HTML
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td height="10" bgcolor="fd6b0d"></td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td width="50" bgcolor="fd6b0d"></td>
<td bgcolor="fd6b0d">
<p style="font-family: Verdana; font-size: 28px; color: #fff; margin: 0; padding: 0; line-height: 60px; text-align: center; font-weight: bold;">
How Confident Are You?
</p>
</td>
<td width="50" bgcolor="fd6b0d"></td>
</tr>
</table>
I thought this was a common issue known as the Outlook Line bug but it isn't.
I couldn't see lines on the desktop versions, but only on the mobiles--because your template is not responsive. So, the Outlook rendering engine is adding an "outlook-overflow-scaling" span wrapper around your tables to compensate.
If you were to make your table responsive (so, for example use width 100%), it would not need to try and scale the email.

HTML Email Padding on TD not rendering - Only for Outlook (Win) 2007, 2010, 2013, 2016

I've been battling literally one final bug fix that only appears in Windows Outlook Desktop, versions 2007, 2010, 2013, and 2016 (plus their respective DPI versions). My left padding keeps getting removed from my td although I use left-padding in other places throughout the email that does not get removed (same class!). I'm hoping you guys can spot something I haven't been able to!
Note: I've stripped out the proprietary stuff and put words in it's place. It's a branding nav bar that contains a varying width image (max width is ~198) and text that should be close (10px padding) away from the image, then a phone # alllll the way to the right
What I have tried:
using padding-left instead of shorthand
applying the padding to the p tag instead
changing p tag from p to span
making all widths percentages
removing all alignment from tds
And one other note - my "strong" class doesn't seem to be applying properly either. Not sure if it's related or not, but figured worth adding.
<style type="text/css">
.padding-l-10 {
padding: 0px 0px 0px 10px !important;
}
.branding {
font-size: 12px !important;
line-height: 18px !important;
}
.phone {
font-size: 12px !important;
}
.branding-bar {
padding: 12px 20px 12px 20px !important;
}
.branding-bar p {
vertical-align: bottom !important;
}
.branding-bar img {
display: block !important;
}
.branding-bar-phone {
font-size: 14px !important;
line-height: 13px !important;
font-weight: 300 !important;
text-align: right !important;
}
.small-text {
font-size: 12px !important;
font-weight: 300 !important;
line-height: 13px !important;
}
.strong {
font-weight: 700!important;
color: #333333;
}
</style>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="630">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="branding-bar" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="590">
<tr>
<td align="left" class="display-block" valign="bottom" width="20%">IMAGE WOULD BE HERE - DYNAMIC WIDTH</td>
<td align="left" class="display-block-relation padding-l-10" valign="bottom" width="40%">
<p class="small-text">
THIS WOULD BE THE TOP WORD
</p>
<p class="small-text strong">
THIS WOULD BE THE BOTTOM WORD
</p>
</td>
<td align="right" class="display-none" valign="bottom" width="40%">
<p class="branding-bar-phone">
THIS WOULD BE A PHONE NUMBER
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

HR (vertical line) stretches the rest of the table

I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.

HTML Outlook 2013 email exceeding 100% width of panel width width="100%" set

I'm trying to create a responsive HTML email for Outlook 2013 but I'm having trouble trying to get the email to respect the width limit I have set (i.e. width="100%"). The actual width is indeed being set to 100% until I reach a certain smaller width at which point I have to scroll to view the information.
The code works fine in IE (no surprise) so I know the code itself is at least appropriate in that sense (i.e. I haven't wrapped something incorrectly).
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
#media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
#media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
Home | News | Events | Applications | OrgChart
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
Title
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
Place of Work<br>
Jacob Johnson<br>
Work Role<br>
jacobjohnson#me.com<br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Recap: My email extends beyond the width limit I have it set for and I can't figure out why. Outlook is a pain in my butt.
Outlook isn't broken, your code exhibits the same behavior in almost every email client.
The problem is that you set all the tables to have a width of 100%. On many of them, you added the class .deviceWidth, where you specify the width in media queries, but not for anything wider than 640px. Outlook does not support #media queries.
Try adding .deviceWidth {width:440px!important; padding:0;} to your style sheet outside of media queries and address your width="100%" on every table.
JSFiddle is not working for me right now so I can't show you a sample.
Good luck.
Outlook doesn't respect 100% width so you need to set a fixed width for outlook, add width to the wrapper table
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
And using the class set width to 100% for all others. Use !important at the end of the declaration to override inline css.
table.for_others {width: 100% !important;}

HTML email column width changing with different email clients

I could not find a direct answer for this, so please be patient if this has been asked before.
I have limited HTML experience. The width of the table columns within the email change when opened in Entourage and Gmail on my Android phone. Gmail on my PC looks fine, Outlook, Yahoo, etc. also great.
Essentially what happens is the widths of the left and right column switch in Entourage/Gmail-droid. Left column width should stay at width="401"; right column should stay fixed at width="171" (they swap so the left column is 171 and the right is 401).
I am working with an HTML email template I picked up online with nested tables. Here is the basic code with text and images stripped out. Any help would be appreciated:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
.bold {
color: #61BB46;
}
.Main {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
.Sidebar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
a:link {
COLOR: #592989;
}
a:visited {
COLOR: #FAAB53;
}
a:hover {
COLOR: #61BB46;
}
a:active {
COLOR: #592989;
}
</style>
<body bgcolor="#ffffff" text="#666666" style="padding:0px; margin:0px;">
<table style="font-family: Verdana, Helvetica, sans-serif; color: #666666;
font-size: 12px; Line-height: 18px; width: 600px;" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td style="font-size: 30px; line-height: 32px; color: #592989;" colspan="4">
<div style="font-size: 12px; color:#999;"></div></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 4px; background-color: #e3dede;"><img src=""
width="578" height="190"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px; text-align: left;"
colspan="4"><p><a href="" target="_blank">
</td>
</tr>
<tr>
<td rowspan="5" width="401" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" width="19" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" width="171" valign="top"><p></p></td>
<tr>
</table>
</body>
First rule with sending HTML email use inline styles. Many clients will strip out any styles in the <head> tag. The safest bet is to not even bother with a <head> or <body> tag as most of the time these get stripped out. Validate your html. You have some invalid markup that many clients will strip out:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
Should be:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<table>
<tbody>