Jump to content

meta tag chrome=1,showing error


Recommended Posts

hi friends,

 

i am asked to create a website which is compatible to chrome and IE 11.

i am developing the site in html5

 

when i added meta tags

<meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" /> 

its showing error in w3 html5 validator

 

Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.

From line 5, column 1; to line 5, column 56

=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" /> <met

how to correct this

Edited by hena
Link to post
Share on other sites

X-UA-Compatible is only supported by the crappy of crap IE browsers, the other better browser don't require this being better browsers they are more future proof. So it only expects "IE=n" where 'n' equals the IE version you are targeting.

so u are telling no need to keep the meta tag chrome=1 and instead of IE=edge, i should keep IE=11 ,is that so?

Link to post
Share on other sites

The only one you need is IE=Edge and it's just so that older versions of IE will behave more consistently with modern standards. Other browsers don't need this meta tag at all.

Link to post
Share on other sites

Right! chrome-1 relates to IE using a chromeframe, but apparently its discontinued, IE=edge will attempt to use newest version of IE (11)but apparently that is unreliable as new versions of IE developed, so its being its normal crappy browser self.

I AM currently working on IE8, on chrome the code works fine but on IE menu and sub menu becoming ordered lists

body {	margin: 0;	padding: 0;	color: #fff;	font-family: Arial;    font-size: 14px;	line-height: 1.5em; 	background-color: #ccc;}h2 { font-size: 26px; margin: 0 0 20px 0; padding: 0;line-height: 1.1em; color:rgb(255,221,0); }#header {	clear:both;	height:120px;	background-image:url(images/86930033.JPG);	}#site_title { 	float:left;	margin: 25px 0 0 405px;		}#site_title h2 { 	margin: 0; 	padding: 0;	font-size:28px;    color:#000;text-shadow:2px 2px #0093d0;			}#menu {	width:960px;	position:relative;	margin: 0px auto;	background:#0093d0;}nav {	position:relative;}nav ul {	margin:0;	padding:0;}nav ul li {	margin:0;	padding:0;	list-style:none;	display:inline-block;	position:relative;}nav ul li a {	font:bold 12px Arial;	text-transform:uppercase;	color:#fff;	padding:7px 10px;	display:inline-block;	text-decoration:none;}nav ul li:hover > a {	text-decoration:none;	color:#fff;	background:#ccc;}nav ul li a.current {	background:#fff;	color:#0093d0;}nav ul ul {	min-width:200px;	position:absolute;	top:100%;	z-index:666;	background:#0093d0;	display:none;}nav li:hover > ul {	display:block;}nav ul ul li {	display:block;	width:100%;}nav ul ul a {	padding:7px 10px;	display:block;	color:#fff;	border-bottom:1px solid #ddd;	text-align:left;}nav ul ul a:hover {	background:#ccc;}nav ul ul a.current {	background:#dddd;	color:#0093d0;}
#main {	clear: both;	width: 900px;	margin: 0 auto;	padding: 45px 30px 0;	background-color: #54534a;	overflow:hidden;}

<html lang="en-US"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta http-equiv="X-UA-Compatible" content="chrome=1" />         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="../index.css" rel="stylesheet" type="text/css" /><body>  <div id="header"><!--starts of header-->	<div id="site_title">	<h2>'IMPROVING HSE</h2>	<img class="image_wrapper image_fr" src="../images/Logo_lockup.jpg" alt="image" />    <br><br><br>	</div></div> <!-- end of header --><div id="menu"> <!--starts of menu--><nav><ul><li><a href="../index1.html">Home</a></li><li><a href="../a.html">a</a><ul><li><a href="../a1.html">a1</a></li><li><a href="a2.html">a2</a></li></ul></li><li><a href="../b.html" class="current">b</a><ul><li><a href="b1.html">b1/a></li><li><a href="b2.html">b2</a></li><li><a href="b3.html">b3</a></li></ul></li></ul></nav></div><!--end of menu-->
Link to post
Share on other sites

You have to remember IE8 was 5 years behind all the better browsers, it did not support display: inline-block;, i think it only just begun to support :hover on elements other than the anchor element, it applied margins, padding, positioning differently, that is why IE was, is such a pain to work with.Also note it won't have any idea what new html5 elements are.

Link to post
Share on other sites

You have to remember IE8 was 5 years behind all the better browsers, it did not support display: inline-block;, i think it only just begun to support :hover on elements other than the anchor element, it applied margins, padding, positioning differently, that is why IE was, is such a pain to work with.Also note it won't have any idea what new html5 elements are.

when we give the site to the third party we dont know rite what browsers they are using .so how to make this website compatible with all browsers

Link to post
Share on other sites

Make sure they understand tbey MUST use IE9 and above for HTML5.To use IE8 and above its probably better to use HTML 4 Strict doctype, with no html5 elements, float instead of inline block, make it so it works in the other better browsers, then spend next 2 weeks fixing problems hacking code so it works in IE 8 and above without the need to use javascript to work in HTML5, and yes! IE is that problematic, time wasting piece of s#![.

  • Like 1
Link to post
Share on other sites

HTML 5 semantic elements work in Internet Explorer 8 as long as you include an HTML 5 shiv, which essentially called document.createElement() to get it to recognize the new elements.

 

inline-block works in Internet Explorer 8 as far as I can remember. In even older versions if IE you can get inline-block to work if you apply it to elements that were inline to start with. By a lucky coincidence, Internet Explorer 8 will render all HTML 5 elements as inline by default, which means you can set inline-block to <section>, <article>, <figure>, <aside> and all the rest without any trouble.

 

As for HTML 5 functional elements such as <canvas> and <audio>, that won't work in old versions of Internet Explorer, but if it's just about CSS and semantic elements, there is absolutely no problem for Internet Explorer 8.

  • Like 2
Link to post
Share on other sites

HTML 5 semantic elements work in Internet Explorer 8 as long as you include an HTML 5 shiv, which essentially called document.createElement() to get it to recognize the new elements.

 

inline-block works in Internet Explorer 8 as far as I can remember. In even older versions if IE you can get inline-block to work if you apply it to elements that were inline to start with. By a lucky coincidence, Internet Explorer 8 will render all HTML 5 elements as inline by default, which means you can set inline-block to <section>, <article>, <figure>, <aside> and all the rest without any trouble.

 

As for HTML 5 functional elements such as <canvas> and <audio>, that won't work in old versions of Internet Explorer, but if it's just about CSS and semantic elements, there is absolutely no problem for Internet Explorer 8.

shall i write seperate css file for ie 7 to 8

Link to post
Share on other sites

I don't think there is a need to support Internet Explorer 7. Even people who are still on Windows XP have Internet Explorer 8 from windows updates.

For Internet Explorer 8 I haven't needed a separate stylesheet. If you use the HTML5 shiv, Internet Explorer 8 should behave practically the same as modern browsers as far as general CSS is concerned. You won't have access to HTML 5 features and APIs, but the appearance of the website should be almost the same. You'll have to live without rounded corners and stuff, but the important thing it that the users can still navigate and use your page without trouble.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...