I'm trying to set the email body with a generated HTML email template using body.setAsync(body, {coercionType: 'html'}). There are noticeable differences between what is rendered in the Outlook desktop clients Mac, 2016, 2019) and in OWA.
Is there any guidance around providing a consistent experience across different clients. Are there any html elements that known to cause issues rendering in Outlook desktop clients?
Ex: Email template
<div>BEFORE HTML TAG</div>
<html style="overflow-y: hidden;">
<div>before head element</div>
<head>
<title>Title here inside head</title>
</head>
<div>after head element</div>
<body style="height: auto; min-height: auto;">OUTLOOK LIGHT IN BODY
<br />
<br />
Test Email with Subject formula
</body>
</html>
<tr>
<td>OUTLOOK LIGHT Footer
<br />
<br />
Test Email with Subject formula
<br />
<br />
</td>
</tr>
OWA Email Body:
BEFORE HTML TAG
before head element
after head element
OUTLOOK LIGHT IN BODY
Test Email with Subject formula OUTLOOK LIGHT Footer
Test Email with Subject formula
Outlook for Mac Email Body:
OUTLOOK LIGHT IN BODY
Test Email with Subject formula
Outlook for Mac HTML using body.getAsync('html')
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=Generator content="Microsoft Word 15 (filtered)">
<style>
<!--
/* Font Definitions */
#font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
#font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Calibri",sans-serif;}
.MsoChpDefault
{font-family:"Calibri",sans-serif;}
#page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang=EN-US>
<div class=WordSection1>
<p class=MsoNormal>OUTLOOK LIGHT IN BODY<br>
<br>
Test Email with Subject formula</p>
<p class=MsoNormal> </p>
</div>
</body>
</html>
There is a disparity between what is rendered within each client.
The rendering engine for messages is different between OWA and native clients. Mac, Outlook 2016, and Outlook 2019 all use the same rendering engine, however they all have different versions as Microsoft has iterated on it. We do not guarantee that body.getAsync and body.setAsync are idempotent.. The clients will coerce the value passed to make it render as efficiently and with as much fidelity that is supported. Please add a request to our UserVoice for body APIs that provide more consistent support for HTML.
Related
I am having real problem with Arabic text in <pre> tag
For example if I put this code in a page view
<pre>
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
I get this display in browser
Here you can see that the arabic text is reversed
This happens just in ASP.NET Core MVC. In other frameworks, the text is displayed correctly.
I've tried to change the dir and the lang attributes but it does not help.
I copied your code snippet and reproduced the issue in my side, I noticed that the content in the page is wrong but in F12 is right, so I'm afraid the browser deal with specific language content automatically for the elements in <pre> tag... So I tried to change the direction manually with the style. How do you think about it?
<div>
<div>
<div style="direction:ltr;unicode-bidi: bidi-override;color:red">اول صفحة ويب</div>
<span>اول صفحة ويب</span>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</div>
<pre >
<html>
<head>
<title>First HTML Page</title>
</head>
<body>
<h1><span style="direction:rtl;unicode-bidi: bidi-override;">اول صفحة ويب</span></h1>
<h1><span>اول صفحة ويب</span></h1>
<p>هذه أول فقرة ننشؤها في أول صفحة</p>
</body>
</html>
</pre>
</div>
Say for example this is my html document.
<html>
<head>
</head>
<body>
<div id="1">
</div>
<div id="2">
</div>
<div id="3">
</div>
</body>
</html>
How in VB.net would would i set the webrowser control to scroll automatically or focus on a specific element?
Thanks
HTML ID and Class names can't begin with a digit, so id="1" is invalid.
What happens with the page after it is rendered is the web browser's business. VB.Net is server side code, so you're better off using JavaScript.
<body onLoad='document.getElementById("myDiv1").focus();'>
After reading a little more closely, I see you specified scrolling in a WebBrowser control. Have a look at this answer.
I have an application that needs to open an external URL on the default Web Browser but I don't want to show the parameters on the URL so I think I need to make a POST instead of a GET, but how?
I'm using the following code to open an external default browser
Friend Sub WebOpen(ByVal WebAddress As String)
Dim sInfo As New ProcessStartInfo(WebAddress)
Process.Start(sInfo)
End Sub
But this expose all the parameters on the URL bar since make a GET not a POST.
Solution:
Make a temporary HTML file and open it using the previous code (WebOpen(ByVal WebAddress As String))
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<!-- <head>
</head> -->
<body>
<form name="Login" method="post" action="http://www.yourWebPage.com/" target="_self">
<input id="accountLoginField" class="textInput" name="account" value="accountX" size="24"
maxlength="32" type="hidden"/>
<input id="userLoginField" class="textInput" name="user" value="userX" size="24"
maxlength="32" type="hidden"/>
<input class="textInput" name="password" value="PassX" size="24" maxlength="32" type="hidden"/>
<input name="submit" value="Start Session" type="submit" id="btn" style="color: transparent;
background-color: transparent; border-color: transparent; cursor: default;"/>
<script type="text/javascript">
<!--
var counter = 0;
var maxCount = 50;
function pushSubmit() {
if (counter++ < maxCount) {
document.getElementById('btn').click();
}
}
//start the process
window.setTimeout(pushSubmit(), 30);
</script>
</form>
</body>
</html>
Hopefully you were able to find your answer using an older post from here: How to open IE with post info in C#?
Please mark this as an answer if this helped you solved your issue.
You could use a string encryptor in vb.net (you'll have to find that yourself) and then do this:
Process.Start(Decrypt("encryptedstringhere"))
That will 'hide' the parameters from anyone trying to decompile your code.
OR
Once you have compiled your executable, find a vb.net obfuscation program (just google it) and obfuscate your exe. This will make it unreadable to nayone who attempts to decompile it or find what string is in your parameters....
Hope this helped!
Rodit
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellite window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks!
Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW
This question already has answers here:
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
(5 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Result in Chrome:
removed dead ImageShack link
Result in FF:
removed dead ImageShack link
Try display:block on the textarea:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.
textarea {
display:block
}
I usually have a "first line" in every global.css file I make.
saying:
<style>
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th
{
margin:0;padding:0;border:none;
font-familiy:"my sites default font";font-size:10px;
}
</style>
After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..
Then you can easily do something similar for < input > and < textarea > too.
if the first line does too much, then just make a second line for the "special cases" alone.
<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>
Remember that CSS inherits, so you can have multiple declarations of different classes.
Does this remove your problem?