I'm sending HTML mail built with Freemarker from my webapp. In the email, there is a button inside a <form> tag as follows (fake URL):
<form action="http://192.168.123.456:23080/path/">
<button style="border: 0; background-color: #003399; padding: 20px 40px; font-size: 18px; color: #FFFFFF; font-style: initial; cursor: pointer">ACCESS</button>
</form>
The form works on Google Chrome, even GMail on Chrome as well, but it does not work inside Outlook or from IExplorer (tested in IE11). When you click on the button nothing happens.
Are there any security constraints about it?
Plenty of email clients do not support forms in HTML formatted email.
It isn't clear if the restriction is for security reasons or other reasons (or if it varies from client to client).
Either way, the restriction does exist. You should generally just include a link in the email that points to a regular HTTPS hosted page containing a form.
Related
Recently, AOL Mail started ignoring the coding I had been using to override their built-in link styling. The strange thing is that my coding still works for regular links, but not mailto links. Here is the workaround coding that had been working for AOL, Gmail, Outlook, and other mail services that like to insert their own styling for links:
<strong style="font-weight:normal;">fake#fakeURL.com</strong>
Has anyone had any success to fix this new problem with mailto links in AOL?
Try adding a class, like class="mail_link" to your tag and then inside the add a style targeting the tag:
.mail_link {
color: #428BCA !important;
text-decoration: none !important;
}
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
I am putting a link in email templates and I donot want to underline the link. In Outlook it is working fine but NOT working in Yahoo and Gmail. Sample code is as followed
<p> My paragraph
<b>
<a style="color: #9B0D25; cursor:pointer; text-decoration: none;" href="abc.com">abc.com</a>
</b>
</p>
I tried text-decoration: none !important; but same result. Can any body help me?
Well ... I was forwarding email from outlook to yahoo. While sending mail from Outlook, it discards the property text-decoration: none;. So when I send email directly to Yahoo, it works !!
Do not use paragraphs in HTML email. Move the style attribute of your anchor tag, to after your href attribute. If this does not solve your problem you have a larger issue than can be seen from the code you've provided.
Adding the important tag will actually be less effective because Outlook will ignore any styling that is followed by !important
If you'd like a template to use, check this one out.
This is a continuation of this question.
I have an ASP.NET app that has some sections displaying differently when viewed in IE8 in DEBUG vs displaying off the published TEST server location.
When I view the page in Debug (through VS 2010), I see this:
However, when I publish to the server and view it directly, it looks like this:
The title box only has the text background color as black instead of the whole section.
Here's the CSS:
.imageBox
{
position: relative;
float: left;
border-style: solid;
border-width: 1px;
text-align: center;
}
.imageBoxTitle
{
width: 100%;
background-color: #333333;
padding: 5px;
}
.imageBoxTitleLbl
{
font-family: Verdana;
font-weight: bold;
font-size: small;
color: White;
}
Here's the generated HTML
<div class="imageBox">
<div class="imageBoxTitle">
<span id="MainContent_ImagesPanel_ImageHolder1_ImageBoxTitleLabel" class="imageBoxTitleLbl">ITEM OVERVIEW</span>
</div>
<div class="imagePlaceHolder">
<p class=".centeredImage"><a id="MainContent_ImagesPanel_ImageHolder1_ImageHyperLink" href="UserImages/nu5t3hhs.jpg" target="_blank"><img src="UserImages/nu5t3hhs.jpg" height="200" width="200" /></a></p>
<span id="MainContent_ImagesPanel_ImageHolder1_CustomValidator1" style="color:Red;visibility:hidden;">*</span>
</div>
<div class="imageAction">
</div>
</div>
So I was thinking that this is probably some kind of caching issue. However, if I make slight changes to the CSS (e.g. change the background color) it picks that up and displays it. Also, I've added a dynamically generated GUID to the querystring for the css files, so they should never get cached. Fiddler confirms that they are not cached, too.
IE seems to render the HTML/CSS differently when viewing through Visual Studio Debug vs accessing the page directly from the server.
What things might cause this behavior?
UPDATE: When I view the page in Chrome or Firefox on the published server, it appears correctly. I have cleared the IE cache (ctrl-f5), deleted the .css off the server and reloade, etc.
When IE renders on localhost, it will use standard compliant mode.
However, when it renders on an Intranet, it will use compatibility mode.
Don't ask me why it does this, it's just one of those arbitrary MS things in order to spice up our developer lives.
Just add this to your header to force IE into standard compliant mode :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Enjoy :)
Credit to JungleFreak for the complete answer
IE8 runs in different modes depending on if it's visiting a site running on localhost vs another server. It's weird, I know. I've run across this issue before as well. Use the developer tools (F12) and check which mode (Quirks, IE7 Standard, IE8 Standard, IE8 Compatibility) the browser is running in.
How can I internationalize the button text of the file picker? For example, what this code presents to the user:
<input type="file" .../>
It is normally provided by the browser and hard to change, so the only way around it will be a CSS/JavaScript hack,
See the following links for some approaches:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
http://www.quirksmode.org/dom/inputfile.html
http://www.dreamincode.net/forums/showtopic15621.htm
Pure CSS solution:
.inputfile {
/* visibility: hidden etc. wont work */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile:focus + label {
/* keyboard navigation */
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
pointer-events: none;
}
<input type="file" name="file" id="file" class="inputfile">
<label for="file">Choose a file (Click me)</label>
source: http://tympanus.net/codrops
Take a step back! Firstly, you're assuming the user is using a foreign locale on their device, which is not a sound assumption for justifying taking over the button text of the file picker, and making it say what you want it to.
It is reasonable that you want to control every item of language visible on your page. The content of the File Upload control is not part of the HTML though. There is more content behind this control, for example, in WebKit, it also says "No file chosen" next to the button.
There are very hacky workarounds that attempt this (e.g. like those mentioned in #ChristopheD's answer), but none of them truly succeed:
To a screen reader, the file control will still say "Browse..." or "Choose File", and a custom file upload will not be announced as a file upload control, but just a button or a text input.
Many of them fail to display the chosen file, or to show that the user has no longer chosen a file
Many of them look nothing like the native control, so might look strange on non-standard devices.
Keyboard support is typically poor.
An author-created UI component can never be as fully functional as its native equivalent (and the closer you get it to behave to suppose IE10 on Windows 7, the more it will deviate from other Browser and Operating System combinations).
Modern browsers support drag & drop into the native file upload control.
Some techniques may trigger heuristics in security software as a potential ‘click-jacking’ attempt to trick the user into uploading file.
Deviating from the native controls is always a risky thing, there is a whole host of different devices your users could be using, and whatever workaround you choose, you will not have tested it in every one of those devices.
However, there is an even bigger reason why all attempts fail from a User Experience perspective: there is even more non-localized content behind this control, the file selection dialog itself. Once the user is subject to traversing their file system or what not to select a file to upload, they will be subjected to the host Operating System locale.
Are you sure you're doing your user any justice by deviating from the native control, just to localize the text, when as soon as they click it, they're just going to get the Operating System locale anyway?
The best you can do for your users is to ensure you have adequate localised guidance surrounding your file input control. (e.g. Form field label, hint text, tooltip text).
Sorry. :-(
--
This answer is for those looking for any justification not to localise the file upload control.
You get your browser's language for your button. There's no way to change it programmatically.
much easier use it
<input type="button" id="loadFileXml" value="Custom Button Name"onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
I could achieve a button using jQueryMobile with following code:
<label for="ppt" data-role="button" data-inline="true" data-mini="true" data-corners="false">Upload</label>
<input id="ppt" type="file" name="ppt" multiple data-role="button" data-inline="true" data-mini="true" data-corners="false" style="opacity: 0;"/>
Above code creates a "Upload" button (custom text). On click of upload button, file browse is launched. Tested with Chrome 25 & IE9.
To make a custom "browse button" solution simply try making a hidden browse button, a custom button or element and some Jquery. This way I'm not modifying the actual "browse button" which is dependent on each browser/version. Here's an example.
HTML:
<div id="import" type="file">My Custom Button</div>
<input id="browser" class="hideMe" type="file"></input>
CSS:
#import {
margin: 0em 0em 0em .2em;
content: 'Import Settings';
display: inline-block;
border: 1px solid;
border-color: #ddd #bbb #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-weight: 700;
font: bold 12px/1.2 Arial,sans-serif !important;
/* fallback */
background-color: #f9f9f9;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C2C1C1), to(#2F2727));
}
.hideMe{
display: none;
}
JS:
$("#import").click(function() {
$("#browser").trigger("click");
$('#browser').change(function() {
alert($("#browser").val());
});
});
Actually, it is possible to customize the Upload File button with its pseudo selector: ::file-selector-button.
Check this for more info: MDN ::file-selector-button - CSS