redredred

I came across an interesting bug today with IE7. Actually, no not interesting, frustrating is a better word to describe it. I had a random appearance of a horizontal scrollbar within a div that has a fixed height set in javascript and overflow auto to achieve a viewport style interface.  The correct  behaviour, the one exhibited in all other browsers, was to add a vertical scrollbar to the fixed height div and not to add a horizontal scrollbar. What IE7 appeared to be doing was not compensating for the vertical scrollbar and adding a horizontal scrollbar with a scroll amount of the vertical scrollbar width.

IE7 horizontal scrollbar being forced by width of vertical scrollbar

Following ?

Ok, now some searching on the web came up with a lot of mentions of this kind of behaviour in different forms and the common fix seems to be using the following css attributes:

overflow-x: hidden;
overflow-y: auto;

Unfortunately for me this didn’t work. I tried all sorts of variations like forcing widths and a whole bunch of irrational, voodoo style css attributes in the hope that i’d happen across the right combination that would slap IE into submission. Nothing!

Some other behaviour that i’d been thinking was odd but hadn’t given lot of thought to yet was:

1. Scrolling the scrollbar to the right would cause it to disappear.
2. Elements such as text, fields etc that appeared underneath the scrollbar showed through

underlying elements showing through scrollbar

I tried using javascript to simulate a scroll to the right on load – something that made me cringe but it was worth a try. No luck still.

Finally, it occurred to me that the answer could be in the second of the observations described above. Ahaaaa! What if I give the element with the desired vertical scrolling a background color. Given that the elements within the scrollable dive are showing through, maybe giving the element a background color would show through as well and effectively hide the scrollbar. At that stage the element background was transparent so if I give it a white background which is was gaining from an underlying parent element that should cover this rogue scrollbar.  And that was that, the scrollbar is gone.

I immediately tried to describe my frustrations to my girlfriend of one more day of my life being wasted due to Internet Explorer and was somewhat unsatisfied with her lack of understanding.  I’m not sure what i’d expected from her but she definitely appeared to be more interested in the interview with Viggo Mortensen on the television – who’d have guessed!!