Member Avatar for LogicWeb

Greetings,

Testing our site with official IE9 release, some quirks I found.

First, www.logicweb.com is the site.

When viewing the site with IE9, the problems are:

1. Drop down menu is under layered, under the main grey banner on home page. Also, the font style/face is entirely different than when viewed in Chrome or Firefox.
see screenshot

http://www.pingy.us/?v=site.png

2. Vertically top aligned text in tab menu
(page)
see screenshot.

http://www.pingy.us/?v=menu.png

Thanks for your help in advance

PS: header has this code

<!--[if lt IE 9]><script src="(beta4)/IE9.js"></script><![endif]-->
  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by LogicWeb

Dani AI

Generated

Two likely root causes explain the IE9 behavior you described: stacking/stacking-context interactions that keep the dropdown underneath the slider, and a font-face or stylesheet-loading issue that makes IE9 pick a different face. was heading in the right direction about parent-level stacking contexts; use that as the starting hypothesis and confirm with the browser tools.

Quick diagnostic checklist (use IE9 F12 dev tools): verify Document Mode (ensure the page is rendering in standards mode), inspect the computed rules for the menu to see which stylesheet or script is setting the font and z-index, and watch the Network panel to confirm any webfont files actually download (and return 200). Also check whether any parent container has overflow other than visible (that will clip children) or a CSS property that creates a new stacking context (transforms, opacity < 1, filters, etc.).

Common, safe fixes to try next:

  • Ensure the dropdown is positioned and given a high z-index while no ancestor creates a new stacking context that isolates it. A minimal CSS approach:

    /* give the menu top stacking priority; keep ancestors overflow visible */
.site-nav .dropdown { position: absolute; z-index: 9999; }
.slider-container { z-index: 1; }

  • If ancestor stacking contexts are unavoidable, append the dropdown to the document body and absolutely position it so it is not trapped by a parent.

  • Avoid blanket “very high z-index” hacks; they mask the real stacking-context cause.

For font differences: confirm @font-face format support and that fonts are served with correct MIME types and CORS headers if fetched cross-domain. See MDN on stacking contexts and @font-face for specifics and examples:
Understanding stacking contexts
@font-face rules and cross-origin notes

If the problem persists, capture a minimal reproducible test (HTML+CSS only) showing the menu and slider and post that; it makes the exact stacking/context culprit easy to spot.

Recommended Answers

All 2 Replies

Member Avatar for tinymark

From what I see, IE9 uses only the styles found in code/css/styles.css and code/css/tables.css.

<!--[if lt IE 9]>

means if less than IE9.

Shouldn't this line

$("#header ul li ul li:odd").css("background-color", "#37393d");

be

$("#header ul li ul li:nth-child(odd)").css("background-color", "#37393d");

I will look at the two css files in a minute. I suspect that even though you may be using z-index in these files, you have the "can't elevate the index beyond it's parents level' problem. This means the parent that it is in is lower in index then the parent of the other div. Time for lunch!

Member Avatar for LogicWeb

Thanks, but that did not rectify the problem.

I'm looking for a solution so the site operates correctly in IE9 and menu drop down doesn't get buried below the right aligned slider.

Your help is appreciated, thank you.

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.