IE + overflow: hidden + innerHTML == disaster

Posted on December 30, 2007. Filed under: DHTML | Tags: ajax, DHTML, haslayout, ie, innerhtml, overflow |

So, once again, IE has tested my patience … and lost.

Here’s the scoop:

I have a div styled with a width, height and an overflow set to hidden [so it qualifies for IE’s oh-so-crucial “hasLayout” attribute]. In essence this div will be populated with content dynamically with JS using the inner HTML property via an ajax call. I have some custom scrollbars I built to scroll the div [hence hiding the overflow content — therefore hiding and chrome scrollbars] … Simple enough, right? I’ve seen this done about a dozen times….

This works flawlessly in Firefox [as expected] … In IE, however, the inner content of the div would spill out into the layout as if it were on a different z-index. I tried manually setting the height and overflow CSS properties every time the script would populate the div, I even went as far as adding the inner content piece by piece [in this case the content is an unsorted list [ul] with one or many [li] children] … that didn’t work.

Then I remembered that IE was written by retards and tried something that really makes no sense: I changed the position to relative. Now, this property pertains to the element’s position within the DOM, not how the overflow functions within the element.

So, position == outside, overflow == inside…..

Me – 1
IE – 0