VML v:shape , V:roundrect elements ain`t displayed correctly in IE6, IE7 in strict mode - internet-explorer-7

Does anybody can provide an answer to such issue? I`m trying to put some vector graphics into HTML. Actually it is not necessary in mine case, so I probably would resort to simple image for now, but I as encountered a problem, I couldn't resolve, it's became very interesting and relevant to the future to define what is going wrong. VML is absolutely new to me, by the way.
I tried to insert several vml-elements into a page, and some of them worked perfectly (in IE6, IE7) namely "oval", "rect". But when I've attempted to insert a shape or roundrect everything went wrong.
Actual question is: is there satisfactory VML support in IE6, IE7 or what I'm doing wrong? But as far as I'd examined my code everything is right in it. Below I'll put a sample, so everyone could test this in IE-browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<style>
v\:* { behavior: url(#default#VML); display:inline-block}
#div1 {
width:400px;
height:400px;
background-color:#e4fe56;
}
</style>
</head>
<body>
<div id="div1">
<v:shape style='width:100px;height:100px' fillcolor="red" path="m 0,0 l 30,0,30,30 xe" />
<v:rect style='width:100pt;height:75pt' fillcolor="blue" strokecolor="red" strokeweight="3.5pt"/>
<v:roundrect style='width:100pt;height:75pt" arcsize="0.3" fillcolor="yellow" strokecolor="red" strokeweight="2pt"/>
</div>
</body>
</html>
Additionally I found that it happens only in strict mode. When DOCTYPE removed or with other conditions when IE works in quirks mode everything works well.

You have mismatched quotes on your style attribute
<v:roundrect style='width:100pt;height:75pt"
You have whitespace in your doctype:
/xhtml1 /

Related

OnsenUI keeps using unsafe-eval and unsafe-inline, even with the ng-csp directive

EDIT :
I've submitted the issue to their GitHub : https://github.com/OnsenUI/OnsenUI/issues/936
EDIT 2 : It's being taken care of ;)
(Sorry for my English, it's not my native language ;) )
This is my first question on stackoverflow. For now, I've always find that someone else have had the same problem as me, and got an answer.
But this time, I can't seem to find a solution, so either I'm the first one, or I'm missing something.
I'm developing a app for Windows Phone and Android (for now), using cordova, onsenui (so angular), and jQuery (thought I don't think this last one is causing trouble here).
I decided that I'll start using CSP the right way, to get a more secure app.
I've added <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://foo.com> in the index.html page, to start with.
I've found that angular does a lot of unsafe things, and I learned about the ngCsp directive.
So now I have :
<html ng-app="app" ng-csp>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://foo.com>
<script src="lib/onsen-1.3.10/js/angular/angular.js"></script>
<script src="lib/onsen-1.3.10/js/onsenui.js"></script>
...
</html>
I don't get anymore CSP's errors about angular.js, but I keep getting some for onsenui.js (unsafe-inlines and unsafe-evals).
For know, the only solution I've found is :
to allow unsafe-inline in CSP
to arrange the only line in onsenui.js that causes an unsafe-eval :
In onsenui.js, I've replaced line 4888 :
}(new Function("return this")()));
by :
}(function() {return this;}()));
So my question is : am I the only one out there having this problem ? Does someone here is using cordova, onsenui, and CSP without any problem ?
I'd rather not put 'unsafe-eval' in the CSP meta, and I'd like to remove the 'unsafe-inline'.
Sorry for this long post, and thank you for your help ! ;)

Broken iron-flex-layout dependency

I have a simplistic page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
</head>
<body class="fullbleed vertical layout" unresolved>
<div>Alpha</div>
<div class="flex">Beta (flex)</div>
<div>Gamma</div>
</body>
</html>
It is very near from there given samples for iron-flex-layout.
But it renders an empty page.
If I add another import, like iron-image, the page is displayed correctly.
It is served by polyserve, and everything is correctly installed otherwise.
Thanks for your help / explanation.
My bad here.
At this point unresolved body attribute is not defined.
Removing it makes it work as expected.
No clue where this attribute is defined, though (but importing an element such as iron-element, as mentioned above, and its dependencies makes it defined)

Attribute with no value in .xhtml pages

In firefox, the localized html pages have to use xhtml, because localized variables are brought in as:
&blah.sub.name;
But an issue is, with frameworks like angular, we need to set attributes that don't have a value. Such as ngCsp:
https://docs.angularjs.org/api/ng/directive/ngCsp
<!doctype html>
<html ng-app ng-csp>
...
...
</html>
However xhtml doesn't agree with this and it throws errors. During runtime we can set these attributes with no value no problem, with javascript. However is there a way to do this not on runtime?

Nancy - Super Simple View Engine: How do I override a MasterPage's title in the view?

I would like to set the title of each rendered page from the corresponding view. I would also like a default title to be set in my Master page. Here is the super-simple set up I am using.
Master Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NancyFX is Splendid</title>
</head>
<body>
#Section['Content']
</body>
</html>
View
#Master['_Master']
#Section['Content']
<h1>Home</h1>
<p>Hello #Model.UserName</p>
#EndSection
I have tried a few of the more obvious guesses but no joy so far. Can you help?
On a more general note - is there any definitive help for Nancy's SSVE? I have read all the docs available on the site and GitHub but they are sparse. Just a list of all SSVE '#[]' keywords, would save me a lot of time.
Thanks
You can just render it from the model, same as anything else:
<!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">
<head>
<title>Hello #Model.Name!</title>
</head>
<body>
<h1>Super Simple View Engine</h1>
<p>This text is in the master page, it has access to the model:</p>
<p>Hello #Model.Name!<p>
#Section['Content']
</body>
</html>
As for documentation, most of the tags are documented here: https://github.com/grumpydev/SuperSimpleViewEngine although it's slightly out of date now. It was initially designed purely for internal use, but obviously you are welcome to use it if you want to. The best place to look if you get stuck is the tests, there's samples for all the tags in there.

Changing icon and title of partial trust WPF xbap

I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.

Resources