Dave Johnson

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 »