Dave Johnson

Internet Explorer StyleSheet Quirks

February 19th, 2008

I have spent the better part of the past week fighting with the Internet Explorer 31 stylesheets limit.

http://flickr.com/photos/cassidy/2461135/

It came up when, thanks to the great performance of our Grid component, a customer wanted to have about 35 grids on a single page for a very complex ordering system. Now as is usually the case, by the time that people come to us to help them they usually have a pretty firm business case for their application and don’t want to change the overall information architecture and the like - so we had to figure out how to get 35 grids running in Internet Explorer.

The problem arises from the fact that for a live scrolling grid where blocks of data are dynamically inserted into the page as the user scrolls, each grid needs its own stylesheet since the column widths and a few other parameters are defined on a grid/column basis and need to be changed globally in a lot of cases; for example, when a column is resized we need to be able to just change one CSS rule and have the widths of all the relevant HTML nodes get updated.

The worst part is that there is even a difference between IE 6 and IE 7 - w00t. In IE 7 it has no problem with just creating one stylesheet and continually appending or overwriting that stylesheet. So that was a pretty easy fix to have a global stylesheet instead of one for each grid. Then comes IE 6… in IE 6 it seems that you can’t even write to the same stylesheet object more than 31 times (or some number around 31 I am not really sure).

So what was the solution for IE 6? We essentially had to make a registry of all the components on the page that keeps track of which components were done initializing and then when all the components are ready create one huge stylesheet and write the contents only that one time. Failing to use this approach meant that IE 6 would just crash.

The other approach that we of course considered was using addRule on the stylesheet object to inject each of the CSS rules into an existing stylesheet rather than writing the stylesheet. I quickly learned that addRule is ridiculously slow in IE. Something like on the order of 30ms to add a rule. So ~35 grids * 50 columns per grid * 30ms per addRule = way too long. Retarded.

We now almost have everything working with > 31 grids. Joy.

Posted in AJAX, JavaScript, InternetExplorer, CSS, quirks | 2 Comments »

The Mystery of Removing XML DOM Nodes

January 16th, 2008

I was reviewing some code today and came across something that seemed very strange. There is a method we use for removing all the child nodes of a parent node in an XML document and it looked like this:

Someone (probably me) was trying to save processing and store the child node collection length rather than re-calculate it every time through the loop. Seems good but one will notice that we are removing the child at the i’th index and so half way though deleting the child nodes we are going to try and delete the len/2+1 node but there will only be len/2 nodes in the collection (or something along those lines).

So I “fixed” it and made it look like this:

Now it would always remove the first element in the collection and iterate over the original collection length - done and done. Oh wait but no. So I go to test this in Firefox and low and behold it crashes like AAPL after MacWorld.

Then I finally get my act together and test both approaches in Internet Explorer and the latter approach - the expected solution - is the one that works. So Firefox is doing some strange things with the length of the child node collection.

Posted in AJAX, JavaScript, XML, quirks | 3 Comments »

CSS Pseudo Class Madness

June 4th, 2007

Through the course of building an Ajax Grid component we have come across many a quirk in both Firefox and Internet Explorer.

The latest thing we found was something that cropped up when we finally converted our Grid to support standards mode in Internet Explorer 6 and 7. To do this we had to fall back on a good blog post from a while back about the use of the

and styles in creating an HTML table where the contents of the cells do not wrap if the contents are wider than the cell width.

Essentially what he came up with was that you needed the following:

width: 0px; and table-layout: fixed; on the table
white-space: nowrap; and overflow: hidden; on the cells
and use <col> tags to specify the column widths but place them at the bottom of the table

How he came up with that last one I don’t know!

At any rate, that seemed all well and good; things were great in our small prototype in both quirks and standards mode. Then when we actually brought it into the product, it was not working at all in standards mode. Several hours and coffees / beers later I finally determined that there was some other completely unrelated CSS that was causing it not to work. The culprit was one of the great new CSS features of IE 7 - the pseudo class. We were using pseudo classes like

since it makes life much easier in a lot of cases so you don’t have to attach mouseover / mouseout handlers to some elements just to change a color.

So just having any

pseudo classes in the page would cause the nowrap behaviour of the table to fail! Even if they were on some random class that is not used with no contents inside the CSS rule, as soon as you move your mouse onto the web page the table layout reverts to not respect on the table cells. Check it out here in IE.

At that point I thought I was home free… clearly I had been sniffing too much of the Internet Explorer glue.

Once again I moved my code into the actual product and once again it did not work. At that point the only difference between the product and the prototype was one thing: in the product we use generated CSS. What we do is use XSLT to build a stylesheet with all the column widths etc and then insert it into the page using

and then set the CSS contents using . Once again we were astounded (really???) at the crapness of IE 7.

In the end it came down to adopting the age old approach of placing div’s inside of each table cell and setting the overflow and white-space CSS properties on it. This really sucks since it dramaticall increases the number of elements in the web page and therefore can really slow down application performance.

In the past I have posted a few other interesting tidbits about using

being bad as well as inline event definitions. We have recently found a really great problem in Firefox with calling on an element that I will cover soon.

Posted in AJAX, InternetExplorer, CSS, quirks, ie7 | No Comments »