Current mood:	blah
Current music:	Dave Matthews Band - Don't Drink the Water

IE7 CSS bug with multiple stylesheets

A Drupal installation had a problem with the Events calendar. The calendar is an HTML table with decently sized cells where the number of the day links to an event description if there is an event that day. The problem is that the number is not decently sized. It's hard to click on, particularly for days under 10 where the clickable area is halved (another UI problem), and making the number bigger would make the calendar unattractively large. There is an easy fix: make the 'a' tag a block and widen it to the size of the cell. Unfortunately, it came out ugly in IE7.

The problem is that IE is not recalculating the area for the 'a' block after loading a second stylesheet file that changes the 'td' padding. The events stylesheet defines the td's padding as 0 and gives the 'a' a width based on td having that padding. Later, IE loads the style sheet for the Drupal theme, in this case bluemarine. The bluemarine theme was pulling in a padding of 0.3em for every td under an "odd" or "even" table row, which effects the calendar's rows since they are classed that way. So the td padding is changed, but IE does nothing about the 'a' until it comes time to draw it on the page.

Remember that the 'a' was calculated as if the table cell had no padding, so its block is the entire width of the cell. IE tries to fit this block inside the cell after the .3em of padding on the left side, and then it tries to add .3em of padding on the right. The result is as you see above; it doesn't work. You can also see that the pink background color for Saturdays and Sundays is not spread out over the right-side padding for the cells that have a linked block inside them. This is probably caused by the same problem since the background color is defined in the first stylesheet.

The workaround is simple. Set the affected style (in this case, padding) in the first stylesheet as "!important" and it will override the setting in the later stylesheet so nothing needs to be recalculated.