Member Avatar for HoverportMedia

Before I ask my question, let me show you the experiment I'm working on:

My dropdown navigation is working fine, however when dealing with older (perferably IE broswers) the navigation (when the page is responsive), hovers the "menu" at a weird position. Unfortunately, I'm stuck at this... Can anyone provide any help?

Thanks

  • 3 Contributors
  • 4 Replies
  • 208 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by HoverportMedia

Dani AI

Generated

After corrected the document type (as noted) and added media-query polyfills (mentioned later), the remaining symptoms reported here—dropdowns appearing in the wrong spot only in older IE—usually trace back to a few predictable layout issues: forced compatibility/document mode, an absent positioning context for absolutely positioned menus, legacy IE “hasLayout” bugs, or ancestor styles (overflow, transforms, filters) that change the containing block. The checklist and snippets below address those root causes directly.

  • Force modern document mode at the top of the document:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • Anchor the dropdown to an explicit positioned ancestor so absolute coordinates are stable:

    .site-nav { position: relative; }
.site-nav .submenu { position: absolute; top: 100%; left: 0; z-index: 1000; }

  • Trigger IE7/8 layout if needed (common fix for odd offsets):

    .wrapper { zoom: 1; } /* gives the element “layout” in old IE */

  • Avoid transformed/filtered ancestors or overflow:hidden on container nodes; these can clip/re-benchmark absolute children. Temporarily remove such rules to see whether positioning snaps into place.

  • If the codebase uses HTML5 structural elements, ensure legacy IE recognizes them via an IE-only shim (so CSS selectors apply).

A short, practical debugging workflow: use IE’s dev tools emulation to reproduce the broken document mode, inspect the computed top/left and offsetParent of the submenu, and temporarily add high-contrast outlines to visualize containment. A quick script to log values can reveal the offset reference:

var m = document.querySelector('.site-nav .submenu');
console.log(m.offsetTop, m.offsetLeft, m.offsetParent && m.offsetParent.nodeName);

Markup errors can also shift layout (as suggested), so a validation pass is useful. In many cases the combination of an explicit positioned ancestor plus an IE layout trigger resolves the mispositioning.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

The first thing that I noticed is that you were including the HTML5shiv, but your doctype is of html5.

Your document decleration should be...

<!DOCTYPE html>

instead of...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I did check with IE11 and used the browser tools and noticed that if I change the mode to IE8, not only do you have a problem with the menu being in the wrong place, its really your wrapper div. In IE8, its shifted up on the page. Newer browers, its placed correctly.

Edited by JorgeM
Member Avatar for HoverportMedia

Thanks Jorge. I did some research and through investigation, I used a more appropriate responsive wrapper, but it didn't solve the problem. I did fix the DOCTYPE as you stated above.

Member Avatar for stokes

Hi,
This won't help you much in the short term, but if you go here:
http://validator.w3.org/
you'll see an enormous number of errors in your experiment page. Theres's no alternative to getting rid of them. When I looked at the page in a couple of browsers, the dropdown lists disappeared on first mouseover. You could maybe make the nav text a bit darker. I couldn't see it at first. There are a couple of letters 'fi' which appear over the slideshow, but that's a detail and I guess you noticed. With html5 you can use 'header' instead of 'div id="header". You'll definitely have to find a workaround for old ie browsers.

Member Avatar for HoverportMedia

Thanks for the reply tenbears. I actually did some more investigating and finally believe I have an understanding of navigation. (I'm still learning more about dropdown navigation in HTML5) Though this problem isn't solved, I can share with you what I have been doing:

In respect to older broswer windows, I now have the ability to incorporate media queries into older broswers windows with this lovely peice of javascript:

https://code.google.com/p/css3-mediaqueries-js/

An alternative is to use respond.js as shown here:

https://github.com/scottjehl/Respond

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.