hena Posted September 11, 2015 Share Posted September 11, 2015 (edited) 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 September 11, 2015 by hena Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2015 Share Posted September 11, 2015 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. Link to comment Share on other sites More sharing options...
hena Posted September 11, 2015 Author Share Posted September 11, 2015 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 comment Share on other sites More sharing options...
Ingolme Posted September 11, 2015 Share Posted September 11, 2015 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 comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2015 Share Posted September 11, 2015 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. Link to comment Share on other sites More sharing options...
hena Posted September 12, 2015 Author Share Posted September 12, 2015 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 comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2015 Share Posted September 12, 2015 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 comment Share on other sites More sharing options...
hena Posted September 12, 2015 Author Share Posted September 12, 2015 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 comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2015 Share Posted September 12, 2015 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#![. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted September 12, 2015 Share Posted September 12, 2015 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. 2 Link to comment Share on other sites More sharing options...
hena Posted September 12, 2015 Author Share Posted September 12, 2015 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 comment Share on other sites More sharing options...
Ingolme Posted September 12, 2015 Share Posted September 12, 2015 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now