CSS content counters breaks CSS in IE

Question

I do expect the site to require a few tweaks to work in IE although this time it appears like something is completely breaking the CSS in IE8 compatibility mode.

To start at the top with the logo position, I have added a red background to check its location and this is not even displayed, although you can see this in firefox. How come this is not being read correctly?

Website

EDIT:

I have narrowed this down to the exact code which causes IE to break:

.content ol li:before {
content: counters(item, ".") ": "; 
counter-increment: item
}

How could I get around this? Without manually adding the numbers. I wanted the numbered list to work like: 1.1.2 etc

Answer 1

Generated content isn't supported in IE<8 (see When can I use...). A brief search didn't return any obvious alternative (a shim etc). Can you just accept that IE6/7 won't see your counters, or perhaps use Chrome Frame?

Answer 2

Having worked through this issue myself, to avoid the IE7 parser error, change:

content: counters(item, ".") ": "; 

to

content: counters(item , ".") ": "; 

Note the whitespace between item and the comma. You can also wrap item in parentheses and it seems to work with all major browsers, though it seems a bit nonstandard.

Answer 3

Transparent PNG images don't work in IE.

Here's a nice explanation and solution: http://24ways.org/2007/supersleight-transparent-png-in-ie6