Our in-house web application framework has a grid "control" composed of two HTML tables, one for the header and one for the body, each inside its own DIV, with a wrapper DIV around the lot which controls the overall sizing and scrolling.
I started having painting problems after absolutely positioning the wrapper DIV using left, top, right and bottom. These problems did not occur with the wrapper DIV positioned using left, top, right and height. The problems were frequent but unpredictable. Sometimes the grid would refuse to paint, sometimes it would paint initially, but then disappear following certain operations within the grid.
However, I then found that if the grid was not properly painted, resizing the browser window would cause it to repaint correctly. So I tried resizing the window in script using window.resizeBy(0,1), which worked up to a point. However, it a pretty ugly hack because (a) it's visible to the user, and (b) it has the unfortunate side-effect of partially disconnecting the sizing of the frame from the window.
I went searching for a better workaround, and finally found this post by Kir Maximov. Bingo! If you simply add an empty CSS class to one of the inside DIVs, it triggers IE to re-render the element. I put a toggle in the script to add the empty class and remove it on alternate invocations of the script. Works like a dream!
Okay, it's not that good. I found that in some cases it would only work if I used setTimeout(). Presumably this causes the operation to be processed by a different thread .... who cares, as long as it bloody works! Joel has convinced me, let's forget our idealism.
