Molly’s recent post Name Your Best IE 7 Bug Resources reminded me about a pretty obscure CSS parsing bug I found in IE 6. Since IE 7 is supposed to have fixed a number of issues with CSS parsing I thought I should probably check to see if the bug still existed there.
It does.
I first encountered this quite a while back, when playing around with CSS counters. Although the bug isn’t specifically related to counters, it just happens that they can throw up a particular sequence of characters that IE disagrees with.
Here’s a quick counters example (for anyone who can’t be bothered to read the W3C page ;-)).This will make a simple little table of contents showing a list of chapters and subsections. First some HTML to create the outline of the chapters/sections, which we can then apply the counters to:
<ol class="chapters">
<li>The beginning
<ol>
<li>The very beginning</li>
<li>Still quite near the beginning</li>
<li>OK, this is starting to stretch the definition of beginning</li>
</ol>
</li>
<li>The middle
<ol>
<li>This is in the middle
<ol>
<li>Yes, this couldn’t be much more middle</li>
<li>Still in the middle</li>
</ol>
</li>
<li>This is the end of the middle</li>
</ol>
</li>
<li>And this is the end</li>
</ol>
and then the CSS:
ol.chapters, ol.chapters ol {
counter-reset: section;
list-style-type: none;
}
ol.chapters li::before {
content: counters(section, '.');
counter-increment: section;
padding-right: 0.4em;
}
In a browser that supports them, such as Opera or Firefox, you should see some nice numbering a bit like this:
IE doesn’t support generated content at all, so should — in theory — happily ignore all of this. But instead what happens is that it reaches the line
content: counters(section, '.');
and bails out. Anything that appears after this line in the stylesheet is missed out. On closer inspection it looks like it’s the way the quote marks appear inside the counters
function that causes the problem. Try it yourself and here’s another example that uses some invalid CSS in the background
property to trigger the same bug.
Permalink. Posted on 9th April 2007 in Browsers, CSS.
Thanks for interesting code. It is really interesting. Continue to inform us.
Whether there are distinctions if to code so
<ol class="chapters">
<li>The beginning
<ol>
<li>The very beginning</li>
<li>Still quite near the beginning</li>
<li>OK, this is starting to stretch the definition of beginning</li>
</ol>
</li>
<li>The middle
<ol>
<li>This is in the middle
<ol>
<li>Yes, this couldn’t be much more middle</li>
<li>Still in the middle</li>
</ol>
</li>
<li>This is the end of the middle</li>
</ol>
</li>
<li>And this is the end</li>
</ol>
Or so?
<ol class="chapters">
<li>The beginning
<ol>
<li>The very beginning</li>
<li>Still quite near the beginning</li>
<li>OK, this is starting to stretch the definition of beginning</li>
</ol>
</li>
<li>The middle
<ol>
<li>This is in the middle
<ol>
<li>Yes, this couldn’t be much more middle</li>
<li>Still in the middle</li>
</ol>
</li>
<li>This is the end of the middle</li>
</li>
<li>And this is the end</li>
</ol>
</ol>
Sorry, comments for this item are currently closed.