"Ensuring Your Web Presence Contributes"

Display none IE8 and above

admin's picture
Posted by admin on Mon 16 Sep 2013

Recently worked on a site that used a "megamenu". These are drop down menus on steroids, using css to hide/show "panels" of links appropriate the parent item. The menu worked fine, however when accessibility testing using the "tab" key (no mouse) I discovered that on IE8, IE9 and IE10, the tab key would not "find" the child links for the top level items.

Repeated "tab" key usage caused progress to loop on the first 2 parent items.

Usually it is IE7 that causes the most grief but in this case IE7 worked fine, it was the newer versions that misbehaved. FF, Chrome and Safari worked fine. By a process of elimination I discovered this was a css problem and as all the megamenu css was in one file, by commenting out chunks I isolated the problem to one "display: none;" entry. Now it seems display: none; removes the element from the DOM in IE8 and above which is why tabbing could not find the links. Radical surgery on the css using the visibility property in place of display fixed it. "visibiliy: hidden;" leaves the element in the DOM but does not display it. You can google for differerence between css display and visibility for better explanation.

So if anyone is having similar issues with IE8+ and css, hope this helps.