CODEWITHSUNDEEP
cssinternet-explorer-9pseudo-element
Matthias Ronge
Matthias Ronge

Reputation: 10112

internet explorer 9 ignores before pseudo element

Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:

 <html>
      <head>
        <style type="text/css">
            .languageSwitch span:before {
                content: "•";
                padding: 0 4px;
                font-weight: normal;
            }
            .languageSwitch span:first-child:before {
                content: "";
                padding: 0;
            }
            .languageSwitch .current {
                font-weight: bold;
            }
        </style>
      </head>
   <body>
    <div class="languageSwitch">
      <span><a href="?lang=de">Deutsch</a></span>
      <span class="current">English</span>
      <span><a href="?lang=fr">français</a></span>
    </div>
   </body>
  </html>

This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.

Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?

1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)

Upvotes: 1

Views: 6588

Answers (2)

Moin Zaman
Moin Zaman

Reputation: 25445

I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.

Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.

See your page here in browserling.

Upvotes: 2

unclenorton
unclenorton

Reputation: 1625

Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.

Upvotes: 2

Related Questions