Tuesday, June 07, 2005

Instructional Components Prototype

I've been asked to make some fairly minor modifications to the ICP. Mosly I need to modify tab colors and content borders, no big deal.

In the process of testing the changes I've run across an IE CSS rendering bug. If you have a floated element inside an object with a border the border is ... um ... corrupted. It appears ok upon first glance, but if you scroll away and back again the border is broken.

The problem seemed familiar. Had I read about this particular problem before? Not sure, but I'm pretty sure that I've read about similar bugs. A little searching turned up a post on notestips.com (Fixing the scrolling DIV display bug in IE) that discusses the bug. Supposedly IE has problems rendering layered content (which probably includes floats since they are outside the flow of a document). Essentially IE renders layers differently based on whether or not something resides below them (such as a background). To fix the border problem I just added a background color to the containing DIV.