Member Avatar for nadnakinam

Hi everyone,

I've a problem while doing Hide\show a div(a element) in InternetExplorer.
i.e for changing the style of a div -- display : block; | display : none;

Show and Hide using display property as block and none works fine in FireFox. But not in IE.

How can i do this? or Is there any other way to this?

Please give solution. Thanks in advance...

  • 2 Contributors
  • 3 Replies
  • 108 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

This looks like the classic CSS dropdown issue rather than a generic display bug. reports show/hide works in Firefox but fails only on the dropdown; is correct that older IE versions (notably IE6) do not apply :hover to non-anchor elements, so a li:hover ul { display: block; } pattern will not work there. Other frequent causes are broken HTML (unclosed tags), quirks-mode rendering (no standards DOCTYPE), or IE “hasLayout” quirks.

Quick checklist to narrow it down:

  • Confirm the IE version and document mode (F12 developer tools).
  • Validate the menu HTML (proper nested ul/li).
  • If using li:hover, assume it fails on IE6; use an anchor-based hover or JS fallback.
  • Try forcing hasLayout for IE6/7 (e.g., zoom:1) if the element refuses to reflow.

Practical fixes and patterns (drop-in examples):

Make the parent anchor fill the li so a:hover can be used:

#nav li { position: relative; }
#nav li a { display: block; }
#nav li ul { display: none; position: absolute; top: 100%; left: 0; }
/* modern browsers */
#nav li a:hover + ul { display: block; }

Emulate :hover in old IE by toggling a class (common Suckerfish approach):

#nav li.hover ul { display: block; }
/* IE6 hover shim: add/remove 'hover' on li elements */
(function(){
  var nav = document.getElementById('nav');
  if (!nav) return;
  var items = nav.getElementsByTagName('li');
  for (var i=0;i<items.length;i++){
    items[i].onmouseover = function(){ this.className += ' hover'; };
    items[i].onmouseout  = function(){ this.className = this.className.replace(/\s?hover/g,''); };
  }
})();

Extra gotchas: z-index and native form controls (selects) can appear above menus in IE6 (iframe shim or hide selects), and compatibility/quirks mode can change behavior drastically. For long-term maintenance, prefer a small JS library (jQuery or a tiny polyfill) or progressive enhancement so modern browsers get CSS-only behavior while legacy IE gets a JS fallback.

Recommended Answers

All 3 Replies

Member Avatar for ko ko

Post your codes.

Member Avatar for nadnakinam

Post your codes.

Fails in only in DROP-Down, works fine in all others...

Member Avatar for ko ko

We can't help you without seeing your code. I think you want CSS drop-down menu and it won't work in IE and others fine. What is your IE version? The CSS drop-down can't work with IE 6 and older because can't understand pseudo attribute ":hover", except for anchor 'a:hover'.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.