I have created my HTML e-mail using tables, and the table has a background image which comes through fine in most web based e-mail clients.
I am struggling to get the background image to show in Outlook.
My latest attempt, I have tried doing the following:
<img style='position: absolute; z-index: 1; height:1157px; width:712px;top:0;left:0;border:0;z-index:1;' src="http://www.site.com/background.jpg" />
<table cellpadding="0" cellspacing="0" border="0" style="padding:0;line-height: 100% !important;font-family: Verdana,Times New Roman,Times,serif; font-size: 12px; position: relative; z-index: 2;" width="712" height="1153">
...
</table>
This image comes through in outlook, although the table is below the image.
I am guessing this is because Microsoft Word doesn't support "position" or "z-index".
I am looking for a push in the right direction to create this HTML e-mail, I don't mind redoing it from scratch. I just need to get this background image working in all web based and desktop e-mail clients.
I've already had a scan through http://www.campaignmonitor.com/css/, I'm guessing my best bet would be to completely slice every image and position them in tables?
If someone could give me a very basic guidance on how to do background images which work globally across all mail clients, I'd really appreciate it.
Thank you.
If you just want a background image for the table, use style="background: url(...)" in the <table> tag.
E-mail programs may still refuse to download and show the background image by default, but this would appear to be the best shot.
Mind you, Outlooks html interpreter is MS Word...
Any HTML that works when opened using MS Word will look fine in Outlook. This means, any 1990 style HTML, diagrammed by tables and stuff...
:-)
Related
Here my email template : http://jsfiddle.net/p5K6N/
I tired few things, I took 2 divs, one div for image and 2nd for texts , and make position : absolute
position : absolute <= is not working
Another thing I tried was background url of image , but still it is not working for me :( - i found on internet it is not working, but what's the alternate solution here?
<p style="text-align: center; font-size: 18px; font-family: 'Segoe UI';">Pursue Your Brand</p>
<div style=" background-image:url('http://beautifullinux.com/web/wallpaper/SolarisExpressBuild69/images/di-scurve-gray.png'); background-size:100%; width: 100%; height:100%; text-align: center; vertical-align: middle;">
some text will be disply here
</div>
Emails are an absolutely awful thing to do because of the fact that there are many different mail clients(gmail, outlook, etc...) and they all run differently. I know from recent experience that outlook does not support background-image or the position styling at all. There is also a few clients that will rip any divs you have out for some reason! In short there is no solution that will run on all email clients because emails are the devil! I found this website helpful for testing my emails though. http://putsmail.com/
http://backgrounds.cm/ this could work for some situations though
Please see http://www.campaignmonitor.com/css/ Not every Mailclient supports Background pictures!
<div style=" background-image:url...>
You have a space before [space]background-image:url... Take the space away.
Use background instead of background-image if you are going to give extra values such as height, width, etc.
I'm being forced to use this browser called Fresco by ANT. In it's specs it says it can handle CSS1. So I'm trying to create a link that has an image, and when hovered over, have the image change.
I've tried:
<td width="30% valign="top" align="left">
<div id="changeImage"></div>
</td>
My CSS is as follows:
#changeImage{
background: url(somefilepath1);
width: 218px;
height: 52px;
}
#changeImage:hover{
background: url(somefilepath2);
}
It works fine in Chrome, Firefox, etc... But in this awkward browser called Fresco, it doesn't show the image at all. I'm not even sure if this is considered CSS1 approved? I've googled and found CSS1 stylings, but nothing to exactly define what I'm trying to do. Any web guru have any tips on this for me?
Sounds like it has trouble reading the psuedo :hover. Technically this was implemented in the early days to be used with only an anchor. I believe Internet Exploder 6 has :hover support only for anchor elements still. This soon has been changed to support all elements on a page.
I would say, try using a sprite sheet where the backgrounds are loaded already and changing the background position of this element. Which would be best practice to do anyways because, you will get instant action, instead of triggering a server request and having the user wait for the new content to arrive.
Here is more detail on the technique and CSS1 does support the background position element
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I'm working on an HTML email.
The problem I get is that GMAIL doesn't use the "background-position" i give it.
I have a table with 100% width that has a background that has to be centered. Most clients do this perfectly but Gmail doesn't. Is there a workaround for this?
The inline CSS is like this: (i've split all the background properties up because otherwise most clients don't display it the right way)
<table style="background-repeat: no-repeat; background-position: center top;" border="0" width="100%" align="center" bgcolor="#1E1411" background="assets/mainback2.jpg">
It IS possible, you simply have to put all the background style in one line, like so:
background:#1E1411 url(assets/mainback2.jpg) no-repeat center top;
But because some email clients can't handle background images you have to separate the colors.
background:url(assets/mainback2.jpg) no-repeat center top;
background-color:#1E1411;
You answered your own question.
GMAIL doesn't use the "background-position
article
May be you have to define your background in STYLE quotes not separately. write like this:
<table style="background-repeat: no-repeat; background-position: center top; background-image:url(assets/mainback2.jpg)" border="0" width="100%" align="center" bgcolor="#1E1411">
From: http://css-tricks.com/using-css-in-html-emails-the-real-story/
What you CAN'T do:
Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
There are quite a few more things you should be aware of. For a great complete list of what online email services support what, check out this article at Xavier Frenette.
So, no can do buddy.
Put the background image on a td like,
<td background="http://someimageurl" style="background-repeat:no-repeat">
and then position the table on center by align="center". Give the table same width as background to get a centered effect. The solution of centering this is but not applicable to all cases.
I am trying to add content to a SharePoint content editor web part, but when I do, it displays as if it's ignoring parts of my CSS.
It displays fine in Firefox 3.6 and IE 8 when it's a stand-alone page, but goes all off when the same code is placed in the Content Editor web part: Click here to view
Often, things that are broken in SharePoint when viewed through IE will appear correctly when the same SharePoint page is viewed in FF; this time the menu was laid out correctly, but the text was the wrong color (should be white).
When I examine the code using IE's Developer Tools, Sharepoint appears to be ignoring #CAPMenu li's declaration of height:0;. If I disable height:0; when viewing the code outside of SharePoint or in SharePoint with Firefox, the menu falls apart a little. When I view the page in SharePoint through IE, the menu is already hosed and disabling height:0; makes no change...
Please help! This is not the first design SharePoint has kept me from using.
Edit on 20101130: I found an article (http://friendlybit.com/html/default-html-in-sharepoint-2007/) about the state of the code SharePoint 2007 publishes from its masterpage and the article starts with what I think is mashing my code...
Things start out really bad, without a doctype on the first line:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"
dir="ltr" __expr-val-dir="ltr">'
This mean that all default pages will render in quirks mode, making rendering unreliable across browsers.
Edit on 20120921: We've since moved to 2010, and while better, SP will still butcher my code in its attempt to fix it. I eventually figured out I could link a CEWP to an HTML file saved to a site library and have the code in the file load in the web part. Because SharePoint can't edit the file, my code comes through clean and pristine :-)
It can be a bit tricky to get your CSS to apply properly in any SharePoint web part, especially content editor web parts.
The main reason for that is that SharePoint generates a bunch of tables and sticks your web part inside that table.
SharePoint adds the following HTML structure too all web part zones :
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" id="MSOZoneCell_WebPartWPQ3">
<!--Your web part HTML starts here in most cases-->
It also applies a lot of CSS rules on that table and on the elements it contains. All the CSS rules for SharePoint are defined in the core.css file (which you can find in the 12 hive). While I don't recommend that you modify that file, you can analyse that rules from it that affect your code.
You will need to override some rules like .ms-WPHeader .ms-WPBody (for your web part header and body) in order to get your styles to apply.
The best way to find what styles are affecting your code is to use Firebug in firefox. Once you understand exactly why your code is broken (through firefox) you will most likely fix your page in all browsers at the same time (except for small things). Don't worry about cross browser compatibility at first, just worry about understanding the rules that come from core.css.
While it is true that !important hacks can make your code work faster, your CSS sheet will become unmaintainable in no time if you go down that road.
EDIT
To make sure that your rule overrides .ms-WPBody (for the font-size for example) you can be more specific than SharePoint is. That is, say you have content inside a a web part :
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" id="MSOZoneCell_WebPartWPQ3">
<div class="my-content">Your content</div>
</td>
</tr>
</tbody>
</table>
Then create a css rule like this one :
.ms-WPBody .my-content
{
font-size : 12pt;
/*Other rules you want to override*/
}
This will be more specific than what SharePoint is applying, and therefore your stylesheet will win.
As for your border question, it's really hard to know what rule is failing without seeing a live example or code.
However, you can try with these rules and see if they do anything for you. Use !important hacks if you need to find out which rule is the problem. The override it properly and remove the !important :
This is assuming that you don't want any border...
.ms-WPBorder, .ms-WPBorderBorderOnly
{
border: none !important;
}
.ms-PostTitle td
{
border: none !important;
}
td.ms-PostTitle
{
border: none !important;
}
Sharepoint is a CMS software & the dynamically generate their code for pages & similarly they assign a CSS class to the tags. And those classes have some property defined in a style-sheet. In order to override those style use '!important' keyword in your style-sheet. for example
.class{
property:value !important;
}
hope this might help you, even if I haven't worked with Sharepoint ever.
I have a minor question:
Im doing a email that is being sent out and wish to have no margin at the top of the email - so that a image or table is flush with the top of the viewport.
I have tried sticking body tags in the html email with margin-top: 0px and it works fine in Thunderbird. However when testing in Microsoft Outlook there is a margin top applied to the content. Is there any way to get rid of this margin or is it not possible in Outlook.
You need to add the following to the <body> tag.
<body topmargin="0">
Ultimately though Outlook is poor at rendering CSS and it's going to get worse with 2010 unfortunately. In the mean time, in-line styles are really the only styles that will work in the majority of cases.
Outlook is the bane of HTML emails everywhere.
Check out this discussion for some answers and tips.
Bottom line: code like it's 1998. Tables all over the place. Don't nest tables either, as that often causes problems. No external styles, so learn to love your inline style attributes.
Ugh, just thinking about it gives me a tummyache.
Maybe you could try to insert some css that overrules the body?
Something like this:
*{
margin: 0px;
padding: 0px;
}