I have modified an email signature for the company that i'm working with, everything looked great when i tested it.
The things is that i did code on a mac, and when my client send a mail to a windows user, there is a small part of that signature that does not apply my styles options
Here's my code :
<tr>
<td style="width: 167px; padding: 0px 13px 8px 30px; border:none;" class="">
<span style="font-family: Verdana, Arial, sans-serif; padding-top: 5px; font-size: 9pt; margin-right: 10px; color: rgb(119, 119, 119); vertical-align: top;" >partner of</span>
<a href="link" title="brand website link" style="color: rgb(4, 180, 134); text-decoration: none;" class="">
<img moz-do-not-send="false" width="35%" src="http://www.website.com/wp-content/themes/brand/images/logo-inner#2x.png" alt="Logo brand" style="padding: 10px; border-radius: 5px; background-color:#153754; border: 0px;" class="">
</a>
</td>
</tr>
This code already works with another image on the top of the signature so i assume it must come from my styling ?
Which is suppose to do this : right behavior of the style
But this is the behavior i get on Windows :wrong behavior of the style
I can't find anything anywhere, so if you have an explanation, i'd be glad to hear it !
Thank you all !
The background-color isn't working because you're applying it to the image. Outlook 2007-2016 does not support styling ALT. Apply the background color to the actual table cell for the image and it will work.
No image is loading because YOU POSTED A DUMMY LINK TO AN IMAGE. If you're going to come here asking for help, post your actual code. I took the time to test your code to determine the best way to help you. Don't make us work harder just to help you. That's rude.
Outlook has partial buggy support for Padding:
https://www.campaignmonitor.com/css/box-model/padding/
Outlook has partial buggy support for background colors:
https://www.campaignmonitor.com/css/color-background/background-color/
My suggestion is to create a table with two cells. Color the one with the image using bgcolor="#ff0000" or whatever color you wish. That will give you a reliable background color. Apply your font styles to the image style which will change the font for the ALT if an image doesn't load. Use cellpadding to give yourself the padding you want with Outlook.
Good luck.
Related
I can't figure out how to change these blue links Gmail is adding to the email I'm trying to code.
I've searched online and implemented their fixes but to no avail.
Here's my code.
<th class="small-12 large-6 last columns text-right show-for-large" valign="middle" style="Margin:0 auto;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;padding-top:16px;text-align:right;width:274px">
Wealth
News
Contact Us
</th>
I added a <span> tag around the links to get it working per Alon's suggestion in the comments.
You'll want to change the colours the 6 digit values, I don't think any email clients support 3 digit colours. I'd also remove all the inline styles on the a tags apart from color & text-decoration, also drop the !important. The font styling will all be inherited from the th.
An overall css fix I use in all templates is below. You'll also need to add an id="body" to your <body> element.
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
(#MessageViewBody a will remove blue links from Samsung Mail too, no need to add that ID into your code though. A handy fix to have.)
So for gmail in order to pick up the an actual style for a hyperlink anchor ( ) you have to use the following inline css to set the colour and remove the underlining :
style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"
This is how a complete tag would look like :
Click here to go to Google
This works as of date answered : 19/09/2019
I'm building Magento website and it's working perfectly fine in Firefox and Chrome, but it's not showing correctly in IE9, IE8.
Body font size is set to 12px but IE seems to ignore it completely.
Here's the CSS of body element:
body {
background: url(../images/background/bkgd.gif) repeat-x scroll left top #FFFFFF;
font: 12px/1.55 arial, helvetica, sans-serif;
color: #444;
text-align: center;
}
Here is the website. Can anyone please help?
There are inline styles in your HTML/Template. View source and search for 20px I found on line 99 something like below:
<div a align="right">
<span style="font-weight:bold; font-size:12pt;">Your local No1Pizza is <span style="font-weight:bold; font-size:20px;"><a href="/pizza.html">Wolverhampton.<span/>
<a style="font-weight:bold; font-size:8pt;" href="/index.php/emptybasket/ ">
(Not your desired shop?)
</a>
</div> </div>
You REALLY need to clean up the code. Also pay attention on the wrong closing tag <span/> above.
I am using a link tag styled to look like a button in my email . The css for the tag is as follows.
Submit
a.submit{
background: none repeat scroll 0 0 #FF9900;
border: 1px solid #FF9900;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
The link style works everywhere except in outlook . Where only the text gets the background color
I noticed the same issue in the google+ email too. Their buttons show the same css styling problem in outlook
A bit of a work around the padding issue in Outlook, you can use a border with the same color as the background to create the padding for the button. For example:
<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>
This would only work for basic button styles.
http://jsbin.com/pohidedayo/edit?html,output
EDITED:
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
See CSS Support in Mail Clients - The Ultimate Guide
In the above link you can see css background property is not supported in outlook so you should use background-color which is supported in outlook.
As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution really well.
I managed to create an HTML table-based button that will work in almost all major email clients.
Here is the HTML for your reference:
<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
<tr>
<td bgcolor="#c62228" valign="middle" align="center" width="174">
<div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
MY BUTTON
</div>
</td>
</tr>
</table>
Hope this helps!
You havent assigned a class to your <a> tag, but if it still doesnt work its because certain email services dont allow certain CSS tags, check here for more info: http://www.campaignmonitor.com/css/
I am coding a simple HTML e-mail and I am experiencing strange behaviour in gmail and Outlook 2003 and 2007. There is a white space below all images. My inline styling for images looks like this:
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;
All styling is taken from MailChimp HTML code and should avoid inconsistencies. Do you have any experiences with this? Images are inside table td markup. Table cells have cellspacing and cellpadding set to 0 as well. Here is a screenshot of the problem: http://cl.ly/EnFt/o
Images are inline by default. That small gap you're seeing is the space for descenders such as those on 'g' and 'q'. To combat the problem, you need to explicitly set all images to be block elements, like this:
<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />
You can use a service like premailer, which lets you add this style in the head of your HTML file, and will automatically place it inline for you.
It's worth mentioning that display:block; will, obviously, mean that each image should be in a separate td or similar: images that need to display side-by-side will be pushed down below each other.
Just use style="display:block;" to image tag.Its works fine.
write border:0; in your <img> tag. Like this:
<img style="vertical-align:top; border:0;">
In my custom webpart I am using few buttons and would like to make their corners rounded.
Below is one of my button in the ascx file:
<style type="text/css">
{
.BtnStyle
{
border: thin ridge #FF0000;
background-color: #C0C0C0;
font-family: verdana;
font-size: 8pt;
font-weight: bold;
color: #FF0000;
border-top-left-radius: 10px 5px; --- did not work
border-bottom-right-radius: 10% 5%; --did not work
border-top-right-radius: 10px; -- did not work
-moz-border-radius: 15px; --- did not work
-webkit-border-radius: 15px; --- did not work
border-radius: 15px; --- did not work and gives an error saying not a valid CSS property
}
}
<table width="500px">
<tr>
<td align="right" >
<table width="60%">
<tr>
<td valign="middle" align="right">
<asp:Button ID="bttn1" runat="server" onclick="bttn1_Click"
Text="Delete" CssClass="BtnStyle" />
</td>
Nothing worked. Please provide me CSS code that helps me making the corners rounded.
The correct property should be:
border-radius:15px;
You can drop the vendor prefixes, as all modern browsers accepts the standard now anyway. I don't know why it doesn't work in your case, but I would check the output to see if the class is there or the style is dropped.
Your editor doesn't recognize CSS3 properties, which is why it's marked as invalid. That doesn't mean it's actually invalid, as modern browsers will parse it just fine.
Also bear in mind that any IE version below 9 doesn't support border-radius. You can use http://css3pie.com/ to make IE7 and IE8 support it, but I think it's better to leave it out and reserve the fancy stuff for the modern browsers, unless the client demands it.
EDIT: You have too many curly brackets. Remove the first and last one. Also, your style tag is not closed.
Which browser are you using? Border-radius is not supported on IE versions before ie9 as this tag is considered an advanced CSS property.