IE7 popover problem¶

Tags: lizard, django

I’m experimenting with twitter bootstrap for a newer snappier layout for our lizard geograpical water information websites. Those websites basically boil down to a header, footer, big map area and a sidebar. All fixed in place.

CSS-wise, I managed to stick the header and footer and sidebar and main map area in place with some position: absolute statements. It all works great.

Only problem: the sidebar content is longer than fits into the actual sidebar, so I’ve got a #sidebar {overflow-y: auto;} to get a scrollbar there if needed. The problem occurs when

• sidebar items have a popover (a twitter bootstrap popover, which means you hover over an item and you get a nice big styled tooltip).

• you scroll down in the sidebar

• you hover over an item with a popover

• you use internet explorer 7

Suddenly your sidebar unexplicably scrolls up! Which means you cannot ever look at or select some of the sidebar items. Sigh.

Eventual solution after 10 hours of searching: remove the overflow-y from the sidebar itself, but put an inner div inside it that has that overflow-y. Then add some javascript to give the inner div the height of the actual sidebar. I don’t like it, but it works.

What’s a shame is that an almost impossible to debug IE7 bug like this costs 10 hours of work. Our customer pays for it, but I’d much rather be adding functionality or beautifying the user interface. But alas, most Dutch government agencies are stuck at IE7. And apparently the “chrome frame” solution isn’t sysadmin-proof so we cannot rely on it.

Most of the times, supporting IE7 is OK because we have pretty neat and clean css and javascript and because we stick to the standards. But there are corner cases that suddenly cost you a lot of effort and money.