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.

Answer 1

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/