Search code examples
cssinternet-explorerpseudo-elementcss-content

Why is this CSS:before statement not working in IE 8, IE9?


Using a :before CSS to get an image/icon here (see round circle in image below), but in Internet explorer 8+ it is just not showing up.

This is the site: http://www.websiteprofessioneel.nl

Image link below shows right element (it's the icon in the first post header) as circled on this screendump http://tinypic.com/view.php?pic=xxd9f&s=5#.Ul_WajZRoWY

this is the CSS for that:

.welpen h2:before {
    content: url("/wp-content/uploads/z-welpen-category-small.png") !important;
}

Anything missing perhaps? All other browsers work fine and as far as I know peudo CSS is totally supported in at least IE9, but it's not working in both IE8, 9 and up.


Solution

  • IE is Probably Using Quirks Mode

    Internet Explorer can run in quirks or standards mode. The purpose of quirks mode was to make the new standards-compliant IEs (8+) able to read and process the code people had previously written for IE7-.

    Likely Reason #1: invalid or absent DOCTYPE declaration

    Try specifying this on the first line of your HTML document:

    <!DOCTYPE html>
    

    Make sure the <html> element is present. Even though HTML5 specification says it's not needed, older IEs (10 and older) tend to enter quirks mode when it's not specified.

    Likely reason #2: site fails (X)HTML validation

    If this is present, make sure the W3C validator throws no errors as these can also trigger Quirks Mode in IE. Yours has 15.

    Actual reason was more unlikely: deliberately triggering Quirks Mode

    After comments discussion, turns out I was right about the quirks mode, but wrong about the reason. Make sure you don't have any meta tags telling IE to run in quirks mode such as this:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />