Firefox

Standards compliant browsers (FF, Safari etc) and IE browsers require different CSS selector definitions to implement transparency. Here is what is necessary to set the following element to 50% transparency.

div#header
    {
        opacity: 0.5;
        filter: alpha(opacity = 50);
    }

Internet Explorer 6 is notorious for a virtually endless list of software bugs, imperfections and deviations from W3C Web Standards that make it an unbearable thorn in the side of every Web Standards-conscious web developer. To make things worse (at least in 2006), it is the most widely used web browser followed by the more standards compliant Mozilla Firefox, Internet Explorer 7, Safari, Opera among others. Much as many a front-end Web Developer would prefer to ignore the capricious irregularities (from the box model to the peek-a-boo bug) of this browser, and forge ahead with standard XHTML, CSS and DOM scripting, business requirements always oblige us to write hacks for IE6 often late at night in an attempt to make deadlines while including IE6.

At hand is a bug that has used up a good amount of my time as I have tried many approaches to properly trigger events in IE6. The objective is to build a menu using XHTML strict, CSS and DOM scripting to semantically layout content, style it with CSS and control expandable menus using Javascript. The basic idea is to trigger modify the CSS display value of an unordered list or DIV (that contains sub-menu items) when the user hovers the parent menu item, and when he mouse leaves the parent item and the sub-menu items. I am running into a tough situation that makes IE6 Windows in particular to close the menu when the mouse is not exactly on top of text within a DIV or a UL LI item that makes a menu item.

Troubleshooting results indicate that this is happening because; unlike the other browsers (Opera, IE7, Firefox), IE6 does not consider the empty space around an element inside a container to be an active part of the container. As documented on many sites, IE6 does not recognise a mouseover or :hover event on anything that is not on an <A> active item. In addition, it does not consider the border of a box/container to be inside that container. As such, when for example I mouse-over the parent menu item in my example and expand the menu, moving from one child item to another crosses over some inactive space and the open menu closes.

Probable paths to explore for a solution
I thought that this was only happening with menus based on a UL LI (List item) hierarchy, and so I rebuilt the menu using a hierachy of DIV elements belonging to various classes... I ran into the same exact obstacle as detailed above.

Solution paths
One walk-around it to code a delay into the function that closes the menu so that it waits for a moment to see if the mouse is on-top of an active item, if not, closes the menu. This delay approach setTimeout("myfunction('')",time); seems to work, but after the delay it closes the menu anyway regardless of the mouse position.

Setting a status flag that has to be verified before a closeMenu() function can be run. In theory, this approach will not suffer from the drawbacks of delaying the closing of the child menu.

I am currently doing additional research on solving this issue without compromising the code quality. If you can think on an approach, or event a simple idea that could provide a remedy to the IE6 characteristic, please let me know and I will be infinitely thankful.