CODEWITHSUNDEEP
htmlinternet-explorer
NRGdallas
NRGdallas

Reputation: 395

IE conditional statements not working (syntax error?)

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.

Upvotes: 0

Views: 1247

Answers (4)

Selay
Selay

Reputation: 6464

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");
}

Upvotes: 0

SwiftD
SwiftD

Reputation: 6069

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/

Upvotes: 1

user818991
user818991

Reputation:

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

Upvotes: 1

Billy Moat
Billy Moat

Reputation: 21050

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.

Upvotes: 0

Related Questions