A Bug's Life!

The Internet Explorer Nightmare

Hello!

Today at work, I had to create one of these things I don’t like because I think they’re not really useable but the client wants… Today the “I don’t like that” thing is… a vertical news scroller!

So, it’s a pretty simple thing indeed… a block (typically a rectangle) and inside it some content going from bottom to top until everything has been seen then you put everything at the bottom and go up again….

So, apart from the script that makes things go up (and it’s a simple one once you remember about scrollHeight and offsetHeight), you have to set the overflow property of the container to “hidden” in the CSS.

Straight-forward and simple ? Well… not exactly! That’s working on Firefox, Chrome, Safari and IE8 but not on IE7 nor IE6…

In fact, IE7 and IE6 behave like if overflow wasn’t set to hidden… it seems it has something to do with hasLayout but hasLayout was “true”…

In fact, for the overflow property to work correctly, you should set the “position” property to “relative” (and you can leave top and left to 0, so that doesn’t mess with the position). And… TADA! It works!

Pretty easy… once you know it!

Too bad we still have to deal with those stupidities!

See you soon!

(by the way, sorry, still no podcast, but I promised it will come, and it will… I’m still waiting for some graphics :))


To Tumblr, Love Metalab