IE conditional statement displaying div even though the condition says it shouldn't

StackOverflow https://stackoverflow.com/questions/23369132

Question

I am having a peculiar problem and I am hoping someone has encountered this before and solved this or knows about this issue and has good knowledge as what is causing this.

I am creating a site using HTML5-Boilerplate v4.3.0 and in that i have the regular conditional statements for IE ( to force browser to use the latest rendering engine) like shown here...

<!--[if HTML5]><![endif]-->
<!doctype html>
<!--[if lt IE 7]>      <html class="ie ie6 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="ie ie7 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="ie ie8 lte9 lte8" lang="en"> <![endif]-->
<!--[if IE 9]>         <html class="ie ie9 lte9" lang="en"> <![endif]-->
<!--[(gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
    <!--[if !HTML5]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <meta charset="utf-8">  ....
    <!--- End Meta tags -->

Now I have these codes based on the link here , this link and also the SO answer posted by andrew here.

I also have a small conditional statement in the body tag which targets the IE and if the version is less than 9 then it displays a div like shown here...

<body>
    <!--[if lt IE 9]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience. This site was designed to work with modern browsers like Internet Explorer 9 or above, Firefox, Chrome, etc.</p>
    <![endif]-->
   .......
</body>

the css element for the class "browsehappy" goes like this...

.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
position:fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #fff;
font-size: 14px;
width: 100%;
text-align: center;
}

I am running IIS7 and/or apache based Xampp as my webserver. And I know in many online help sites they say the best method to force IE to open in a particular mode is to use server configuration files. hence i created the files...

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=10" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

web.config for IIS7 and...

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=edge"
    # `mod_headers` can't match based on the content-type, however, we only
    # want to send this header for HTML pages and not for the other resources
    <FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe?   g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
        Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>

part of .htaccess for apache

Everything works just fine if I have the server config files in my folder with the html files.

But part of my problem is that I dont have any control over or even access to the final webserver the site is going to reside in. So I have to come up with a solution that does not involve server config files.

Now the conditional statement at the top , before the head tag, seems to be working. When opened in IE9 it opens up in IE 9 compatibility view browser mode and IE9 standards documents mode (as opposed to IE7 documents mode and IE9 comaptibility)

But, the conditional statement inside the body tag is not functioning right. Now as i had mentioned since i dont have control over the final webserver of the site, i removed the config files from the root folder and used the meta tag approach to force the browser.

enter image description here

that is my screenshot when opened in IE9 without the server config files in the root folder. With the config files it behaves correctly.

Now my question is even though the browser is opened in the IE9 mode why is the division showing up?

Any help would be greatly appreciated. Thanks in advance. p.s: output works fine when opened in ie11. have not tested in ie10.

Was it helpful?

Solution

Since the site opens in IE9 Compat View, I suspect that you are hosting this locally and the page is loading in the Intranet Zone. This will affect the results compared to if you host on the internet. You might (temporarily) uncheck the "Display intranet sites in Compatibility View" setting in IE's Compatibility View settings to see if this changes the result.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top