IE 9 conditional comments

HTML & CSS
1

I have been struggling with getting an IE 9 conditional comment to display in IE 9.

It will display in IE 8 and lower but not in IE 9 :unamused: .

Here is the code I have place is the IE code I have in the header.php file:
/* won’t display in preformatted text – under the doctype*/

<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 9]><html lang="en"><![endif]-->

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 9]><html lang="en"><![endif]-->

	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1"/>

	    <title>Consolidated Gypsum Supply Ltd.</title>
	   
	    <meta name="description" content="Serving Edmonton, Calgary, Red Deer &amp; Saskatoon for over 35 years! he #1 source for all professionals &amp; the Do-it-yourselfers We supply you with only the best products from drywall, insulation, framing steel, ceiling products,  manufactured stone, residential &amp; commercial roofing &amp; tools to get your job done right! ">
	    <meta name="keywords" content="Imasco, Tyvek, BP, IKO, CertainTeed, CGC, Roxul, Owens Corning, Dewalt, Stanley, OX Tools, Forge, Crisp Air, Resisto, Environmental StoneWorks, Easy Rock, Bostitch, Duraflo,insulation, insulation products, stucco, interior, exterior, interior products, exterior products, steel, steel products,  siding, siding products,  drywall, drywall products, drywall accessories, plaster, ceilings, ceiling tiles, acoustical ceiling,  scaffolding, masonry, Polyiso, S.B.S., T.P.O., E.P.D.M., building wraps, wraps, poly, roofing, roofing products, commercial roofing, residential roofing, residential, commercial, DIY, contractors, partitions, mouldings, Web Track Products, Edmonton, Edmonton Alberta,  Red Deer, Red Deer Alberta, Calgary, Calgary Alberta, Saskatoon, Saskatoon, Saskatchewan, Alberta, Saskatchewan, delivery, pickups,  Web Track,  Web Track Accounts,credit applications,  cash applications, traing resources, training tools,  careers, clearance items, clearance">
	    <link rel="author" type="text/plain" href="http://new.consolidatedgypsum.ca/humans.txt">
	   

	    <!-- favicons -->
	    <link rel="icon" type="image/png" href="assets/img/icons/favicons//cgs-favicon-16X16.png" sizes="16x16">

	    <!--google fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,400italic,700italic%7cPT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>
	    
	    <link rel="stylesheet" media="screen" type="text/css" href="assets/styles/main.css"/>
	    <link rel="stylesheet" media="print" type="text/css" href="assets/styles/print.css"/>

	    <!--Fonts/Icons CSS -->
	  <!--  <link href="https://cdn.myfontastic.com/NhZx6VJdCkNCuF6diCYWzV/icons.css" rel="stylesheet"> -->
	   <link rel="stylesheet" type="text/css" href="assets/fonts/styles.css"/>

	    <!--Vendor CSS Files - Nivo Slider CSS-->
	    <link rel="stylesheet" href="assets/styles/vendor/nivo/default/default.min.css" type="text/css" media="screen" />
	    <link rel="stylesheet" type="text/css" href="assets/styles/vendor/all-vendor.min.css">
	  <!--   <link rel="stylesheet" type="text/css" href="assets/styles/vendor/nivo/nivo-slider.min.css"/> -->
	    
	   <!--  <link rel="stylesheet" type="text/css" href="assets/styles/vendor/back-to-top/back-to-top-dist.css">
	   <link rel="stylesheet" type="text/css" href="assets/styles/vendor/css3-animations.min.css"> -->
	</head>
	
	<body>
    <!--[if lte IE 9]>
     		<div class="browse-happy">
     			<h3>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</h3>
     		</div>
    <![endif]-->`

Here is the link to the site: http://new.consolidatedgypsum.ca/

2

Not sure, but IE 9 was the last version to support conditional comments.

So though “greater than 9” seems like it might work, my guess is that it doesn’t because IE 10 does not support conditional comments

3

It is the last version to support conditional comments. I’m not styling for IE 9, I’ve based this off my analytics.

What I’m trying to to do is, if a user is still using version 9, I’m going to to display: You are using an outdated browser. Please upgrade your browser to improve your experience.

but I can’t seem to get that to work…

4

It was also the last version to support JScript and the first to support JavaScript - which unfortunately means that some things that worked in IE8 and earlier no longer work while some other things do making for a real mess of working out how to code specifically for that browser. Fortunately no one uses it any more so we don’t have to worry about all those problems any more.

5

I think the conditional you want to target IE9 and earlier is simply <!--[if IE]> That should affect all versions, except for the newer ones (10 onward) that ignore the conditionals.

1 Like
6

Thanks, I’ll try that.

7

You don’t have any code there that targets IE9 at all.

The last rule ‘gt IE 9’ means greater than IE9 which would be IE10 and above but as they don’t support CCs then the rule is wasted. You needed either ‘gte IE 9’ greater than or equal to IE9 or more simply ‘if IE 9’.

Or as mentioned above if you want to target ie9 and under just use ‘if IE’ as Sam said.

8

I figured it out… I also had some styling issues with it.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.