IE conditional statements not working (syntax error?)

Question

Assuming the following code:

<div class="content">
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<div style="height:42px; align:center;" id="logo">

My goal is to make the div with the background swoosh.jpg be a simple div with class=top

I have tried getting the conditional to work myself, however for some reason (syntax?) it is not working properly.

The following is what I have tried

<div class="content">
<!--[if !IE]>
<div class="top">
<![endif]-->
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->

I should mention that I cannot use anything other than inline CSS for this application - and have no access to the header.

The solution I have given works in all IE except IE10 - where it reverts to the non IE code, If you wanted to target IE10 specifically I think you would have to use a javascript solution: http://www.impressivewebs.com/ie10-css-hacks/ — SwiftD, Dec 03 '12 at 17:45

score 1 · Answer 1 · answered Dec 03 '12 at 17:19

Try adding

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->

To the top of your HTML doc. Then use CSS like this

.content {
      color:red;
    }
.ie6 .content {
      color:blue;
    }
.ie7 .content {
      color:green;
    }

This way you can keep all of your CSS in one file and your IE classes next to the non IE classes.

Check out this doc from Paul Irish

please note that I cannot use stylesheets per this application. — NRGdallas, Dec 03 '12 at 17:22

SwiftD · Accepted Answer · 2012-12-03T17:57:32.623

I think this is how to do what you want but as previously stated, it's not the best way of doing things if you have other options (tested in IE9 - IE10 doesn't work with conditional statements):

<![if !IE]>
<div class="top">
<![endif]>
<!--[if IE]>
<div style="background:url(swoosh.jpg) no-repeat; background-size:100% 100%;" class="top">
<![endif]-->

http://jsfiddle.net/APFZh/2/

IE 10 targeting requires a little JS:

<![if !IE]><!--<script>  
if (/*@cc_on!@*/false) {  
    document.documentElement.className+=' ie10';  
}  
</script><!--<![endif]-->

This appends a class of “ie10” to the html element but you could write whatever you want to the document

http://www.impressivewebs.com/ie10-css-hacks/

Another possible way to deal with IE 9 and 10, as well as all other browsers, is to use ` ... ... `. See http://stackoverflow.com/questions/6742087/how-do-i-make-an-else-in-an-ie-html-conditional/15176305#15176305 for reference. — Ian Campbell, Aug 04 '13 at 23:21

score 0 · Answer 3 · answered Dec 03 '12 at 17:17

0

It would be better practice to just have the div with class="top" but set different styles for it in a separate IE stylesheet as using inline CSS is not recommended.

Put this in the HEAD of your page:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->

As to it not working I'd suggesrt making sure you have a valid DOCTYPE at the top of your page as IE is very fussy about that.

answered Dec 03 '12 at 17:17

Billy Moat

20,792
7
45
37

stylesheets are not viable for the current application, and all CSS has to be inline. – NRGdallas Dec 03 '12 at 17:19
as for doctype - my page is actually only from the tag down, and cannot have a header in its final form (the header is generated by a system outside of my control) - is there any other form of workaround? – NRGdallas Dec 03 '12 at 17:20

score 0 · Answer 4 · answered Dec 18 '14 at 04:51

An update if somebody still reaches this page, wondering why the ie targeting doesnt work in recent IE browsers. IE 10 and onward no longer support conditional comments. From the MS official website:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5.

Please see here for more details: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

If you desperately need to target ie, you can use this jquery code to add a ie class to and then use .ie class in your css to target ie browsers.

if ($.browser.msie) {
 $("html").addClass("ie");
}

IE conditional statements not working (syntax error?)

4 Answers4