IE + overflow: hidden + innerHTML == disaster

Posted on December 30, 2007. Filed under: DHTML | Tags: , , , , , |

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


Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

9 Responses to “IE + overflow: hidden + innerHTML == disaster”

RSS Feed for Adventures in PHP / DHTML / CSS and MySQL Comments RSS Feed

thank you, thank you, and THANK YOU
I’ve spent the all day with that bug, and eventually find the solution here :)
You’re right, they really are retards!
nice layout, by the way.
see you, david

I am Brazilian and you save me!

Can u show an example?

thank you, in my case I changed the position to absolute !!! So, it’s really 1:0, for you

THANK YOU Googleplex Factorial times!

This fixed my problem, too.

after one day and a half I saw your article. Thank you!

Stupid IE. Thank you for this.

Perfect. Thanks to you my scalp still has hair :D

Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: