Before I ask my question, let me show you the experiment I'm working on:
http://hoverportmedia.net/experiments/responsivenavigation3.html
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
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.
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.
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.
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:
http://hoverportmedia.net/experiments/mealsonwheelscc.html
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:
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.