Tuesday, February 20, 2007

Vertical scroll bar hide-’n-seek in IE6

The Issue: Some visitors have called to complain that the scroll bar is missing on a page that requires them to click an “I Agree” button at the very bottom. This seems to be a sporadic problem because we’ve only fielded a couple of these calls, and my own testing machine doesn’t exhibit this problem.

Googling resulted in similar complaints from others — until I changed a few things in their stylesheet and fixed their problem. One person set top and left as well as position: relative on a containing div. Changing these to margin-top and margin-left and removing the position fixed his problem. The reason IE6 wasn’t displaying the scroll bar had to do with the positioned element overflowing the base container; that is, the positioned container was treated as a layer because of the top and left settings, so it was “outside” the content flow. Am I making sense? It makes sense in my head, but I’m not using the proper vocabulary.

Anyway, that isn’t what’s happening on my page because the containing elements are all stretching to match the length of the copy (which doesn’t happen with positioned layers). Which means that the scroll bar should be triggered. [I am using the One True Layout so I have a feeling this may be an issue with overflow: hidden on the containing row. I’ve set overflow: visible in the IE fix stylesheet, but I have no idea how to tell if it works or not.]

The other qualification is that not all IE6/Windows XP users are getting this bug.

The Predicament: How do you fix a problem that you can’t reproduce?

Also, we don’t know that this is the only page that is exhibiting the bug, only that it’s the most obvious, since if the visitor can’t click the button at the bottom, she can’t continue to the rest of the site. There haven’t been reports of the bug on other pages. Or perhaps because the visitor with the bug can’t get past this page, she can’t report further bugs on the rest of the site. Either way, I am not incredibly motivated to find a solution. I understand it’s a real problem, but unless I can see it in action, I can’t even begin to think where to start fixing it. I can’t mess with the stylesheet because I can’t tell if it’s making a difference or not.

Anyone ever had a problem like this, please help.

Labels: ,

Thursday, February 15, 2007

CSS drop-down/fly-out menus and IE select elements

IE5-6 renders select menus on the top-most layer, no matter how you set up the HTML or how you declare the z-index.

The last time this issue came up for me, I included a javascript that would make the select element disappear when the overlapping drop-downs were triggered. This worked fine because the select menu was the same width as the drop-down and so it was completely covered. Now with a different site, this is an impractical option, mainly because there’s no telling where the select menus will end up or how wide they’ll be.

I’m trying to meld a bunch of CSS drop-down/flyout solutions into one mass. Here are all the features I need:
  1. Works in IE5-6, IE7, Safari, Mozilla/Firefox
  2. Flyout sub-submenus
  3. Drops over select menus in IE5-6
  4. Includes hover margin of error (mouse forgiveness when moving from menu to sub-menu)
  5. Simplest HTML = easiest maintenance
I’m looking at the combined ADxMenu with the WCH script from aplus.co.yu. Haven’t finished testing yet, so I’ll update this entry when it’s all working.

Labels: , , , , ,