CSS Parsing Bug

9th April 2007

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:

The items in the list are displayed with section numbers: 1, 1.1, 1.2, 1.3, 2, 2.1, 2.1.1 and so on

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.

Comments

  1. Thanks for interesting code. It is really interesting. Continue to inform us.

    # Posted by Smileys on 7th May 2007.

  2. 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>

    # Posted by Nant Hag on 18th June 2007.

Sorry, comments for this item are currently closed.

Of Interest

Hangouts

Listening