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.
Related
I try to write an HTML Email template that includes a button with a link and has a maximum width with the same margins left and right. However while some of the CSS part gets implemented some does not. For example for then button, the background and the font color is as I intended, however it does not add padding to the background and does not remove text-decorations.
A similar problem occurs when I try to set a maximum width for the overall Email with the same margins left and right. It implements the width but does not set the margins.
All of these things work out if I look at the template in a browser, only when I try to send it as an Email, it is displayed differently.
I already only use inline CSS and coded it as a table. For the button I wrote this code:
<tr><td>
<h1> <a style="background-color: #8c30ff; color:white; text-decoration: none; padding: 0.5em" href="https://google.com"> Join now </a></h1>
</td></tr>
And I tried setting the maximum width to this:
<table style="margin-bottom: 80px; margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 620px; align-content: ">
Email clients all have different support for different HTML and CSS features. You can check Can I email for detailed data about support across email clients.
max-width and margin in particular have mixed support, especially in The Outlooks on Windows. max-width is only supported in Outlook on Windows since Outlook 2016. And margin with auto values are not supported at all in Outlook on Windows. You must rely on tables with HTML attributes like align="center" for Outlook on Windows.
You can see an example of button code implementation by email developer Mark Robbins here: https://www.goodemailcode.com/email-code/link-button
And you can try this generator by Campaign Monitor: https://buttons.cm/
I'm building myself a website on SquareSpace and having a bit of trouble with the layout. I've built a few sites before so understand the concept of CSS, and how it's applied to divs etc...
So, I want the page to have full width images (edge to edge in the browser) interspersed with text and graphics.
The banner image and footer image look good, as you can see the image is edge to edge...
The problem is with any additional images I try to add (SS makes you add them inside 'image block' objects), currently it looks like this which is bad, and not edge to edge, shown here with red arrows...
I have spent hours googling about, and testing various solutions and nothing works. I also spent the last 30 mins with SS support and they suggested making a 'gallery page' which you can't add text to so that's totally pointless!
I tried to identify the CSS ID and apply CSS to the image, that didn't work either:
Can anyone help?
current CSS not working:
.sqs-block.image-block { padding: 0 !important }
body {
margin: 0 !important;
padding: 0 !important;
}
Cheers
John
I didn't find a programmatic solution to this hideous problem.
However, I was able to figure out a way to manipulate a SS 'index' style page to achieve the effect I was looking for.
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 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...
:-)
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;
}