Pi, Fibonacci and Golden Ratio Meet IE 31

Depending upon your level of mathematical education, you should be familiar with such numbers as Pi, the Golden Ratio or expressions such as Fibonacci. Today, thanks to Internet Explorer, I would like to introduce you to another prime number with huge significance - IE 31. Pronounced (Ayee-Thirty-One).

Let's face it, if you are a web developer or designer, you know that Internet Explorer was built for more than navigating the Internet. Internet Explorer is a tool of learning. Constantly changing the rules of the universe with limited documentation or purpose. Internet Explorer is job security, an oracle of new beginnings and a source of constant renewal. Oh, Internet Explorer, how I enjoy the multitude of hours I have spent rewriting code, building special case catches and rolling my eyes back into my skull as I go unconscious while attempting to figure out the latest "special case".

Just this week I was blessed with another Internet Explorer learning moment. It's how I discovered (Ayee-Thirty-One). You may have previously discovered the unique role that 31 plays in web development, as I know many have traveled this road before me. There's an important back story here.

Back Story - A Client

It always starts with a client, doesn't it? Anyway, our group was fortunate enough to be part of a large organization's global web site launch. We had tested the site for browser compatibility numerous times, naturally, since this is what professionals do. With the site fully blessed, we launched it live. Now, as happens frequently, with the site live - collectively we decided to add some additional content; for those playing the home game, we use Drupal and this means we added a few new modules to incorporate additional functionality.

Since I'm fairly nerdy, I develop using Ubuntu, and sadly can not deploy Internet Explorer (the learning browser) on my system. With the new feature set deployed, when I reviewed the web site all was good, and so it was for the other developers on project. Here's a shock, our designer, he only uses Internet Explorer as form of shock therapy so it was the client who brought this to our attention. I quote...

“In Internet Explorer, the web site looks like sliced white bread.”

Sliced White Bread = Ayee Thirty One

Frankly, no web site is suppose to look like Sliced Bread. But once we fired up the latest and greatest Internet Explorer – we quickly understood his reasoning. The majority of formatting was not being applied to the site. Since the site was comprised of DIV tag elements, they were for the most part stacked on top of each other. No kidding, as a TEAM we spent a Friday night, several hours of the weekend and half a Monday diagnosing the problem. Then we discovered it, Ayee Thirty One.

WTF is Ayee Thirty One?

For no logical reason, Internet Explorer will ONLY accept 31 CSS style sheets. WHAT!!! I understand a number defined by Octal numerics, which is why it's 31 and not 34 or 29, but why not 63, or 127. With the general idea behind linking additional files to provide expandability, who in their right mind believes that developers and designers are going to be fine with only 31 additional files? UGH.

It's my new special number – Ayee-Thirty-One.

For those who care, here is the BEST reasoning I could find.

EricLaw's IEInternals

KB 262161 outlines the maximum number of stylesheets and rules supported by Internet Explorer 6 to 9.

  • A sheet may contain up to 4095 rules
  • A sheet may @import up to 31 sheets
  • @import nesting supports up to 4 levels deep

Some folks have wondered about the math that underlies these numbers. The root of the limitations is that Internet Explorer uses a 32bit integer to identify, sort, and apply the cascading rules. The integer’s 32bits are split into five fields: four sheetIDs of 5 bits each, and one 12bit ruleID. The 5 bit sheetIDs results in the 31 @import limit, and the 12 bit ruleID results in the 4095 rules-per-sheet limitation. While these limits are entirely sufficient for most sites, there are some sites (particularly when using frameworks and controls) that can encounter the limits, requiring workarounds.