CSS Url() Not Recognized in Internet Explorer 10

css url() not recognized in internet explorer 10

The content property is only valid on :before and :after pseudo-elements. You should change it to:

.ui-icon-zoom-in { 
  background: url(images/16x16/ZoomIn.png) no-repeat; 
  width:16px;
  height:16px;
}

Apart from that, IE8+ only supports content property if a valid DOCTYPE is specified.

Internet Explorer not displaying image loaded by CSS

Because the content property is used with the ::before and ::after pseudo-elements to generate content in a document.

http://www.w3.org/wiki/CSS/Properties/content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
    #homeIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #settingsIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #myProfileIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
</style>
</head>
<body>
    <div id='header'>

        <table id='headerBar'>
            <tr>
                <td><a href ='#' id='homeIcon'></a></td>
                <td><a href ='#' id='myProfileIcon'></a></td>
                <td><a href ='#' id='settingsIcon'></a></td>
            </tr>
        </table>
    </div>
</body>
</html>

http://jsfiddle.net/w7c27/3/

External CSS not working in IE11

I know this is an old problem, but I ran into it trying to solve the same problem with my webserver.

IE/Edge was not honouring the css generated by my (custom-built) webserver. The problem was when my webserver returned the css it didn't mark the mime-type as css and IE/Edge reported (hidden in its console output):

SEC7113: CSS was ignored due to mime type mismatch.

Fix was simply to mark the HTML response mime-type as "text/css" and all was OK.
Note that all the other browsers (Firefox, Chrome, Safari, Android) I tried had no problem with the incorrect mime-type, they just got on with it.

SVG inline CSS not displaying in internet explorer

IE works if you base64 encode the data e.g.

    .calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}

Style within background-image css of SVG not working in IE

The <style> {...} </style> element caused you problems with parsing the CSS content. You can overcome this by using a base64 encoded string instead of a URL encoded string:

.example-icon {  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIwIDIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+IDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IC5zdDB7ZmlsbDojMDBGRkZGO3N0cm9rZTojRkY3Njc2O3N0cm9rZS1taXRlcmxpbWl0OjEwO30gPC9zdHlsZT4gPGNpcmNsZSBjbGFzcz0ic3QwIiBjeD0iMTAiIGN5PSIxMCIgcj0iOS41Ii8+IDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik01LDEwaDEwIE0xMCw1djEwIi8+IDwvc3ZnPg==');  width: 20px;  height: 20px;}

<div class="example-icon"></div>

CSS Url() Not Recognized in Internet Explorer 10