Trying to fix something for an email. Screenshot of problem here: http://imgur.com/pEQvVqf
There is basically a 600width table that I need the same background color and text color as the rest of the email.
Yet as you see either side is white - what do I do here? Make two tables to the left and right? And make them grey or can I make the text stay like it is and make the table width 100%? Because that skews my text formatting.
Any help greatly appreciated - here is my code (couldnt format properly with 4 spacing so used backquotes:
<table width="600" height="21" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#ccc;font-family:verdana; font-size:10px; color:FFFFFF">
<tr>
<td colspan="2" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; padding:10px 10px 0px 10px;">
<font style="font-family:arial;font-size:10px;">
You have received this email from an independent marketing company x x x x x x x .Company Reg. No.03976500 You have registered to receive our email advertising from one of our sites, and may unsubscribe from this newsletter by clicking here<br> For more information on how we use your data, please read our privacy policy.
</font>
</td>
</tr>
</table>
Cheers
Just add this css - body:background-color:#123456;
Try something like this:
<div style="background-color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; color:#fff; width:100%">
<div style="width:600px; margin: 0 auto; padding: 10px 10px 0 10px;">
You have received this email from an independent marketing company x x x x x x x .Company Reg. No.03976500 You have registered to receive our email advertising from one of our sites, and may unsubscribe from this newsletter by clicking here<br> For more information on how we use your data, please read our privacy policy.
</div>
</div>
Just use a div tag and some special CSS classes.
<div style="background-color:#ccc;font-family:arial;font-size:10px;">
<table style="width: 600px;margin:0 auto;font-family:verdana;color:FFFFFF;">...</table>
</div>
Related
Finding a strange behavior only in outlook.com with a button text alignment for an email build. For some reason it's aligned to the top of the button instead of being in the middle. Unable to figure out why this is. Any insights appreciated.
Thank you for your time and thoughts.
Code snippet and CTA image link below.
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td style="padding: 0px 0px 0px 0px; background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle">16pxXXXX XXXXX XXXXX</td>
</tr>
</table>
I would first start off by reviewing this asset for anything "email" related in order to get an understanding of how different email clients react with CSS.
You will notice how display is not supported in Outlook which would result in your anchor tag not being able to use padding. I would recommend coding an email button the following way:
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
16pxXXXX XXXXX XXXXX
</td>
</tr>
</tbody>
</table>
This unfortunately only makes the text clickable and not the entire button, but it's going to be your best option in order to make it consistent across all other email clients without having to create an image.
Does anybody know why the © and ® don't superscript nicely without affecting the leading (i.e. line-height) like ™ and ℠ do?
I've tried wrapping © and ® with <sup> and even <small> but I can't get it to work the way I need it to. Sometimes changing the font size helps but not always.
This is for HTML emails where we use it in <h1>, subheads, and body copy.
When I do wrap it in <sup> and apply CSS it just becomes difficult to control. It behaves differently from one email client to another, and one device to another (this is for responsive emails).
Here's the fiddle: http://jsfiddle.net/cy03eov1/5/
And of course position: and em don't work well in email and margin support is spotty.
body {
font-size: 26px;
line-height: 1em;
color: #ccc;
font-family: Helvetica, sans-serif;
background: lightslategray;
}
table {
width: 80%;
margin: 30px auto 0;
background: #fff;
padding: 5px 20px;
}
.copyright {
font-size:70%;
}
<table cellspacing="0" border="0">
<tr>
<td>
<p>Do you know that horrible fear when you’ve broken something on a client project and you have no idea how to fix it? I do… Sometimes I’ll have been<span class="copyright" style="color:red;"><sup>©</sup></span> wading through templates on a site, getting it all up to scratch, then suddenly I’m faced with a page of doom—a whole<span style="color:red; font-size: 70%; vertical-align:text-top;">®</span> page of garbled semi-English that sort of resembles an error<span style="color:red;">™</span> message, but nothing I’ve ever seen before.</p>
<p>As a freelancer, I’ve always been proud to have the time to dedicate to learning<span style="color:red;">℠</span>. Keeping up with the industry, and being able to level up my skills on each new project, is very important to me.</p>
<p>But sometimes I struggled when I pushed myself that little bit too far. A few times I’ve had to request a lifeline from kind people on Twitter to pull me out of a hole. And then I feel a bit daft, having to admit my inadequacies on a social network in order to save myself from a worse situation.</p>
</td>
</tr>
</table>
Unicode does not have superscript or subscript glyphs for these characters so you have to modify the font style separately
http://jsfiddle.net/cy03eov1/8/embedded/result/
I just added
p span { }
and made the font smaller and moved it up by 8 pixels.
I noticed you mentioned your doing this for an email. While the above mentioned solution would work fine for a webpage, it's best not to use CSS in email, especially positioning attributes like position:relative;
You can achieve the same affect with tables though (see demo)
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" style="font-size:18px;">Line of text followed by a </td>
<td height="20">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="10" style="font-size:9px;">©</td>
</tr>
<tr>
<td height="10"><table border="0" cellpadding="0" cellspacing="0"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table></td><!-- this is a standard table spacer alternative to email shim -->
</tr>
</table>
</td>
<td height="20" style="font-size:18px;">character.</td>
</tr>
</table>
Takes a lot more work but works across all email clients.
I am trying to create a newsletter using tags to line up the data. I have created the following code:
<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
<p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
<a href="hyperlink">
<img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;">
</a>
text
</p>
</div>
However, when I view this design in Outlook mail, the second doesn't fall below the first and crowds into the first along with the third instead.
Any thoughts on what I can try to do? Thanks!
OB
You can add the following CSS code to your div element.
clear: both;
Here's are JSFiddle's with and without clear: both;
Actually, ignore that. Removing float: left; from all div elements will sort the trick - JSFiddle
Add br tags where you want it to start on new line. <br /> , you can even do <br /><br /> as many times as you want to give it extra space.
<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
<p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
<a href="hyperlink"><br />
<img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"></a><br />
text</p>
</div>
Divs for emails is a baaaad choice, email clients usually ignore some css properties to protect it's users, you should use tables (yes, it's sad but true) and do simple designs for emails. I guess float is being ignored by the email client.
just remove float:left; from div style
Email clients do seem to prefer tables to divs, but divs aren't necessarily 'evil' in emails. You just can't expect the HTML rendering engine of Outlook to behave like Chrome or FireFox. So...code for the least common denom, right?
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:410px; height:207px; padding:0; margin:0; background-color:#efefef; float:left; text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000">
<img align="left" src="http://lorempixel.com/output/abstract-h-g-190-207-10.jpg" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"/>text
</td>
</tr>
</table>
Your code was probably close to working. Think of the <td> as your <p> element, and the <table> as the <div>. In some ways, I think email markup is easier (lots of limitations, and fewer options -- forces one to keep it simple).
Since both your links were going to the same place, I wrapped your <img> inside the <a>, which is legit.
This ought to get you close, I think.
http://jsfiddle.net/KhE4B/
I wrote a php script to send a message, with html formatting and custom css styles,
to a facebook user. The message can be seen in his private message box.
it would be perfect if html formatting was kept on.
The only way I found to do that was to put the style inline (as a tag attribute)
instead of writing an internal style section or using an external css file.
ex: <div style="width:100px">
But I have two problems.
image in img tag does not display and I cannot insert a wrapper block to fit the whole message width.
How can I do that properly?
Not sure what quirks facebook has, but it is best practice to include inline styling and also using tables in html email. For your image to work, it probably needs to be hosted online, not embedded.
Assuming facebook doesn't strip any code out, a simple table like this should fit the width:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td style="padding:20px; padding-bottom:0;">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/sports/" width="400" height="200" alt="">
</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:20px;">
Content here.
</td>
</tr>
</table>
Note - this is not a full html email structure, just a table that should be placed inside your body section.
I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly