Incompatibility with Nice menus: horizontal menu gets located under the page content in IE8 [#1855848]

I use Zen 7.x-5.1, with responsive-sidebars, with options

Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Add HTML5 shim JavaScript to add support to IE 6-8.
Add meta tags to support responsive design on mobile devices.

and module "Nice menus" 7.x-2.1 with option "Use JavaScript", used as block in the navigation region with option "Menu style: down" (i.e. horizontal).
On Firefox 10.0.11, Firefox 17.0, Chromium 20.0.1132.42 Ubuntu 12.04, Chromium 20.0.1132.42 Mageia.Org 2, Web (Epiphany) 3.4.3, Konqueror 4.8.5 and Konqueror 4.9.3, the menu appears above the content as expected, but in Microsoft Internet explorer 8.0.7600.16385, the Nice menu appears below the content.
In css/layouts/responsive-sidebars.css , the section

@media all and (min-width: 480px) {
  #main {
    padding-top: 4em; /* Move all the children of #main down to make room. */ /* Modified by Henri on 2012-10-26. Was 3em. */
    position: relative;
  }

  #navigation {
    position: absolute;
    top: 0; /* Move the navbar up inside #main's padding. */
    height: 40px; /* Changed by Henri 2012-10-31 */
    width: 100%;
  }
}

is not taken into account by IE8.

Comments

Comment #1

Fiable.biz commented 1 December 2012 at 13:38

Title:

Incompatibility with Nice menus: horizontal menu gets located under the page content in IE8

» Small correction.

Oops: I copied here above my modified section by mistake, but the problem is the same. The original section of responsive-sidebars.css not taken into account is:

@media all and (min-width: 480px) {
  #main {
    padding-top: 3em; /* Move all the children of #main down to make room. */
    position: relative;
  }

  #navigation {
    position: absolute;
    top: 0; /* Move the navbar up inside #main's padding. */
    height: 3em;
    width: 100%;
  }
}