I'm working on a thumbnailer whereby a service takes thumbnail images of HTML content in a form-less IE9 control. Everything is working smoothly with a DrawToBitmap call along with a couple of GDI calls, but SVG content is not displaying. Everything else seems to display just fine, but no SVG.
I figure that this has something to do with how SVG is implemented in IE, but I don't know the details. Any thoughts?
TIA.
The answer came from Ted Johnson of IEBlog:
IE9 has no separate SVG engine; it’s all one DOM and rendering
pipeline. However, if your document isn’t in 9 standards document
mode, you’ll not get any SVG content. I think, by default, the
WebBrowser control in .NET defaults to compatibility mode. Try adding
a meta tag to the top of your HTML page to force IE9 mode:
<meta http-equiv="X-UA-Compatible" content="IE=9">
This, indeed, turned on SVG rendering like a light switch.
You can also set a doctype of HTML4 strict or HTML5.
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
From http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/ :
Before I begin, I’d just like to point out that on my test page, Internet Explorer 9 refused to display any of my SVG images on a basic HTML page until I declared the HTML4 strict or HTML5 doctypes.
Related
I've made a website. It looks nice when using PC, but not good when using smartphone (Too small). Is there anyway to fix that?
Here is my website: https://hai-weather-forecast.herokuapp.com/
Did you try to add the responsive meta tag in the head element?
<head>
...
<meta name="viewport" content="width=device-width">
...
</head>
Here is the background docs
I tested by open the url you provided, setting the same device size with developer tools, and adding that meta tag in the head element editing the html by hand.
Beffore adding meta tag
After adding meta tag
Cheers!
Is there any way to setup Firefox and Chrome to work with escape=false attribute in h:outputText tag. When there is some html that needs to be shown in the browser, Firefox and Chrome show parsed string correctly, but any other links in application are freezed (??).
The example html from db:
<HEAD>
<BASE href="http://"><META content="text/html; charset=utf-8" http-equiv=Content-Type>
<LINK rel=stylesheet type=text/css href=""><META name=GENERATOR content="MSHTML 9.00.8112.16434">
</HEAD>
<BODY><FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT></BODY>
Parsed HTML on the page:
läuft nicht
What is very weird, is that in IE everything works (usually it is opposite).
I use primefaces components (v2.2), .xhtml, tomcat 7 and JSF 2.0
You end up with syntactically invalid HTML this way:
<html>
<head></head>
<body>
<head></head>
<body>...</body>
</body>
</html>
This is not right. There can be only one <head> and <body>. The browsers will behave unspecified. You need to remove the entire <head> and the wrapping <body> from that HTML so that you end up with only
<FONT color=#000000 size=2 face="Segoe UI">läuft nicht</FONT>
You'd need to either update the DB to remove unnecessary HTML, or to use Jsoup to parse this piece out on a per-request basis something like as follows:
String bodyContent = Jsoup.parse(htmlFromDB).body().html();
// ...
Alternatively, you could also display it inside a HTML <iframe> instead with help of a servlet. E.g.
<iframe src="htmlFromDBServlet?id=123"></iframe>
Unrelated to the concrete problem:
Storing HTML in a DB is a terrible design.
If the HTML originates from user-controlled input, you've a huge XSS attack hole this way.
The <font> tag is deprecated since 1998.
It seems to me that you're trying to do something that JSF was not really meant to do. Rather than try to insert HTML in your web page, you ought to try having the links already on your page and modifying the "rendered" attribute through an AJAX call.
Can a pure SVG document arriving at a browser, support a favicon.ico specification? My case is machine-generated pure SVG, no <html> or <head> tags available.
Yes, since SVG is XML, you can add the (x)html link element anywhere in the SVG:
<link xmlns="http://www.w3.org/1999/xhtml" rel="shortcut icon" href="favicon.ico" />
There's absolutely no need to wrap this in foreignObject.
I recommend putting the link element as a child of a defs element though, just to let the SVG engines know that it can be skipped for the actual SVG rendering.
Do note that this isn't "pure" SVG; it's an xhtml/svg hybrid — but it should work in all the browsers that support SVG.
I know this question has been asked many times and has different solutions, but I have a different problem.
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
If i add the above code to my aspx page, the page zooms automatically to max size. How do I fix this? With out the above code, the web page zooms only on text box focus. I have used a liquid CSS layout for my web page.
i want to answer the question but need more information.
do you want to disable zoom?
if so do you want it default zoomed in OR default zoomed out.
mobile doc type helps :
!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"
if you do not want to disable zoom let me know what you are trying to do or please link to your url.
i've been using jquery succesfully with almost any browser but ie6, i'm giving up i wish i could use a conditional statement like
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/style-for-ie.css" media="screen" />
<![endif]-->
To disable my scripts, is there anyway i can tell ie6 to stop loading something or to disable javascript altogether? or can i make a script.js for jquery that stops ie6 from loading certain functions?
I'm willing to use php to disable some code in my html if ie6 present, as long as is transparent to the user.
Thank you in advance
Use a downlevel-revealed conditional comment to place a class on the <body>:
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if gte IE 7]><!--><body class="notie6"><!--<![endif]-->
Now you can target selectors at IE6 or not-IE6, from both stylesheets (so you don't necessarily have to use a separate stylesheet) and scripts (either checking the class of document.body manually, or just using selectors like $('body.notie6 div.something') in jQuery).
There are conditional comments directly in JScript too, but, annoyingly, they only target particular JScript engine version numbers, which don't always tie up with IE version numbers. Using the HTML conditional comments for everything makes it more consistent.