The CSS Content property does not work in MSIE?

advertisements

Here (link removed) I'm trying to replace the text in an anchor with an image, using the CSS content property. I'm guessing that it's irregular behaviour for Chrome to do what I want it to do, by replacing the text with the image I provide in the CSS code?

Here's the code I use:

<!-- HTML -->
<a href="http://www.pegi.info/en/index/global_id/505/?searchString=Assassin%E2%80%99s+Creed%C2%AE+III&submit=Search#searchresults" class="pegi18">PEGI Rating</a> 

<!-- CSS -->
.pegi18 {
content: url("http://example.com/path/path/path/18.png");
width: 50px;
height: 61px;
}

Here's the end result in MSIE 11 and Chrome 32

Why won't the images show in MSIE? I've also done tests on modern.ie.


I agree with GCYrillus, I too think it is bad practice and may not work in all browsers (as your post suggests). If you want to control the picture based on a class try adding a background picture instead of the content property.

.pegi18 {
background: url("http://daylostar.com/img/gwt/pegi/18.png");
width: 50px;
height: 61px;
}