My dotnetnuke website looks fine in IE9 but breaks in IE8 & IE7.
I've tried the meta tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
but if i put it in the ascx ( 1st line ) but it doesnt show up. And if i put it in the page setting - tags , it shows up at the bottom of the header. So it also doesnt work that way, how to get the tag on top or is there any other way?
Thanks in advance.
You can use some code to add the directive. In your skin (or, in a control that is references by each skin control), add the following:
<script runat="server">
private void Page_PreRender(object sender, EventArgs e)
{
var meta = new HtmlMeta();
meta.Content = "IE=edge";
meta.HttpEquiv = "X-UA-Compatible";
this.Page.Header.Controls.AddAt(0, meta);
}
</script>
This requires that AutoEventWireup is true in the Control directive. Otherwise you'll also need to override OnInit or something like it to manually wire up the event.
I hate to suggest this, but you might need to add this to default.aspx in the root of your website, if you do this though, you'll need to remember to do it again when you upgrade DNN in the future.
I haven't seen this done before, but this is how it was done for emulating IE 8/7 when using IE 9:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
If not, then try this one:
<meta http-equiv="X-UA-Compatible" content="IE=9">
Add those to your header with the other meta tags. This should force IE10 to render as IE9.
Related
To prevent some browsers to translate certain term on a HTML page, I use the class="notranslate" class name in a wrapping tag.
It works fine for Google Chrome with its built-in Google Translate plugin.
But it doesn't work with Microsoft Edge.
According to their documentation, it should.
I also tried the translate="no" property on the tag, without any success.
Any idea how to solve this?
If not, I would like to prevent auto-generated translations on Edge, but not on the other browsers.
You can try to add this line inside <head></head> to disable automatic translation in browser:
<meta name="google" content="notranslate" />
I've tested and it can work well in Edge and Chrome.
Edit:
If you only want to restrict automatic translation in Edge only, you can add the <meta> tag dynamically. You can first check if the browser is Edge, if yes then add the tag. You can refer to the following JavaScript code:
<script>
if (window.navigator.userAgent.indexOf('Edg') > -1) { //detect if Edge browser
var meta = document.createElement('meta');
meta.name = 'google';
meta.setAttribute('content', 'notranslate');
document.getElementsByTagName('head')[0].appendChild(meta);
}
</script>
The google tag for not translating the page has been updated to
<meta name="googlebot" content="notranslate">
For more info check this link: https://developers.google.com/search/docs/crawling-indexing/special-tags
This worked for me in Safari, Edge, and Chrome:
<html class='notranslate' translate='no'>
<head>
<meta name="google" content="notranslate" />
<meta name="robots" content="notranslate">
...
</head>
<body translate="no" class="notranslate">
...
</body>
</html>
I am trying to add target="_blank" parameter to the <base> Tag in the header, when certain parameters are met.
Currently the base tag is filled with the url give in config.baseUrl:
<base href="http://yourdomain.com/">
I've gone through the reference and tried different settings (meta, pages.headerData, ..) but I was not able to manipulate the <base> tag within the header.
what I want to achieve is this:
<base href="http://yourdomain.com/" target="_blank">
what I got so far is to remove the baseUrl completely and set <base> manually:
page.headerData.1 = TEXT
page.headerData.1.value < config.baseURL
page.headerData.1.wrap = <base href="|" target="_blank">
config.baseURL >
Still i have 2 problems with this: Typo3 (in my case 4.5) adds a CSS link before my tag - which results in a file not found message when I open any sub-path on the website.
when opening: http://yourdomain.com/path/subpath
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="TYPO3 4.5 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_xxx.css?xxx" media="all">
<base href="http://yourdomain.com/" target="_blank">
<title>Some title</title>
chrome says:
/path/subpath/stylesheet_xxx.css?xxx GET 404
(where it should find the file in /stylesheet_xxx.css?xxx ..)
the other problem is, that when doing a HMENU with special=rootline
logo = HMENU
logo {
special = rootline
special.range = 0|0
}
the href to the startpage will always be blank, after I unset config.baseUrl.
Any help would be greatly appreciated.
/edit: adding a second <base> tag in header would work, but the validator doesn't like two base tags :(
Maybe this constants help you?
# default target for links:
PAGE_TARGET = _blank
# target for links in sitemap:
content.pageFrameObj = _blank
From here:
http://www.pi-phi.de/25.html
On the first issue (they are related, I know):
I wouldn't add the config setting to page.headerData.1.value, rather use a constant:
mydomain = www.mydomain.com
then
config.baseURL >
page.headerData.1 = TEXT
page.headerData.1.value < {$mydomain}
page.headerData.1.wrap = <base href="http://|" target="_blank">
About the routing issue: is that really so? According to your code, it should look in www.mydomain.com/typo3temp.
In the documentation, it says that the baseURL should have an end slash. But in all my sites, I use it without, and it works fine. Give it a try without the end slash.
On the second issue
logo = HMENU
logo {
special = rootline
special.range = 0|0
}
Is this only a "home" link? Then consider adding it with a typolink to the home page's pid instead or even totally by hand, as it will likely never change (href="\").
PS: base tag is a bit out of fashion, but you know that already. I used to use it mostly because of IE 8 issues, and now, well, I'm used to it. Also, for TYPO3, the use of "absRefPrefix" has been recommended. I'm just noting this here academically.
I would like to help with QWebView. I'm trying to create a software that will open a web page, so far everything was right, but I came across an issue with QWebView. On double click with the mouse is zooming.
WebView {
id: webviewHelp
anchors.fill: parent
smooth: false
url: "http://stackoverflow.com"
objectName: "webView"
}
This happens because of the use of mobile devices that need disabled some features that bring comfort to small devices. Put on head this code
<head>
<meta name="viewport" content="width=device-width; initial-scale=1;
maximum-scale=1; user-scalable=no;target-densitydpi=72;" />
...
</head>
Is that your full code?
If not then check for a onDoubleClick property, I'm not familiar with Qt5 much but on Qt4 it had to be a child of a Flickable then the onDoubleClick property a child of the WebView calling heuristicZoom.
I have used the same meta that HTML5 Boilerplate is using, and the W3C HTML validator complains:
Bad value X-UA-Compatible for attribute http-equiv on element meta.
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
What is wrong with this meta tag?
Either X-UA-Compatible is not "standard" HTML (FSVO "standard" that involves appearing on a publicly editable wiki page referenced by the specification) or the Validator isn't up to date with the current status of that wiki.
At the time of writing (20130326) X-UA-Compatible appears on the wiki page under a section that states: "The following proposed extensions do not yet conform to all the registration requirements in the HTML spec and are therefore not yet allowed in valid documents." So the validator is correct to reject this value.
If you're looking to make it technically valid (everyone loves to see the green favicon) w/o effecting any functionality, you should be able to just wrap it in a "if IE" tag.
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
One possible solution is to implement a fix server-side in the header, as suggested in this nice write-up by Aaron Layton. (All credit should go to him, and I'll paraphrase rather than plagiarize...)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
"When Internet Explorer comes across this line it will change the engine that is being used to first Chrome Frame, if the plugin is installed, and then to Edge (the highest supported document mode of the browser)."
Steps:
Fix the page validation – This is achieved by simply removing the tag
Rendering speed – Instead of waiting for the browser to see the tag and then change modes we will send the correct mode upfront as a response header
Make sure that we only show the fix for Internet Explorer – We will just use some server side browser detection and only send it to IE
To add the header in PHP we can just add this to our page:
if (isset($_SERVER['HTTP_USER_AGENT']) &&
(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
header('X-UA-Compatible: IE=edge,chrome=1');
Or you could add it to your .htaccess file like so:
<FilesMatch "\.(htm|html|php)$">
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</FilesMatch>
Link to original article, check comments for possible caveats. Also includes an implementation for C#.
Fix Bad value X-UA-Compatible once and for all
Hope this helps!
.. may this be a good answer?
Set HTTP Header with PHP:
http://www.joshuawinn.com/fix-html5-validator-error-bad-value-x-ua-compatible-for-attribute-http-equiv-on-element-meta/
This is not my own work but I hope it is useful to others too.
If you download/build the validator src code, you can add support yourself.
Add the following to a file such as html5-meta-X-UA-Compatible.rnc) Then include it in html5full.rnc.
I did this and it works nicely for validating.
meta.http-equiv.X-UA-Compatible.elem =
element meta { meta.inner & meta.http-equiv.X-UA-Compatible.attrs }
meta.http-equiv.X-UA-Compatible.attrs =
( common.attrs.basic
& common.attrs.i18n
& common.attrs.present
& common.attrs.other
& meta.http-equiv.attrs.http-equiv.X-UA-Compatible
& meta.http-equiv.attrs.content.X-UA-Compatible
& ( common.attrs.aria.role.presentation
| common.attrs.aria.role.menuitem
)?
)
meta.http-equiv.attrs.http-equiv.X-UA-Compatible = attribute http-equiv {
xsd:string {
pattern = "X-UA-Compatible"
}
}
meta.http-equiv.attrs.content.X-UA-Compatible = attribute content {
xsd:string {
pattern = "IE=((edge)|(EmulateIE(7|8|9|10))|7|8|9|10|11)(,chrome=(1|0))?"
}
}
common.elem.metadata |= meta.http-equiv.X-UA-Compatible.elem
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
See this article for a possible fix
Please remove ,chrome=1 from meta tag it will working fine. With validator:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I had the same issue and adding and to surround that entire line remedied the situation.
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...
I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?
Basically, can I do something that would achieve the same as one of either of these pseudo code examples?
Example using pseudo code for external files...
<html>
<head>
if some-condition
<!--#include file="meta1.html" -->
else
<!--#include file="meta2.html" -->
...
</head>
...
</html>
Alternative example (again pseudo code) for selecting alternative elements directly...
<html>
<head>
if some-condition
<meta name="viewport" content="abc" />
else
<meta name="viewport" content="def" />
...
</head>
...
</html>
NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.
EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.
Using Javascript:
document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );
Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/
You could do this with javascript / jQuery quite easily.
Set your conditions and then append() to the head.
Example:
if(//condition here){
$('head').append('<meta name="viewport" content="abc" />')
}
else{
$('head').append('<meta name="viewport" content="def" />')
}
if you are using a server side, like asp or java, the thing becomes lot easier for you.
i shall consider you are not using server side coding.
use javascript for getting the browser name (navigator.appname I guess).
then you may use DOM to add <meta ..../> tags inside <head> element.
document.getElementsByTagNam('Head').appendChild(metaChild);