I’m working on a site for a client, and everything is working perfectly under IE8+ and everything else (both Windows and Mac).
http://www.cirkut.net/wp/libertyguide/
If you head there in something other than IE6 and IE7, you’ll see that you can hover over any part of the menu to activate the menu/hit the button. This is needed to be able to access the dropdown menus in IE6 and IE7.
If this was just in IE6, I wouldn’t care as much, but with IE7 being a tiny bit more compliant and more dominant in the market, I need this to work, and if a fix works for both, great, if not, then IE7 will be fine as a fix.
Details:
- Running WordPress 3.1.3
- Started with Starkers theme (edited from there out)
- Using WordPress Menus, so no unusual
- Using IE8.js (http://code.google.com/p/ie7-js/), but only fixes some IE6 menu issues (horizontal menu broken in IE6 without this JS)
Other Information:
- I’ve tried adding top and bottom padding to the links, but it won’t do anything for the actual selection box model (hence why I now have no top and bottom padding).
- I’m wondering if I have my dropdown menu set up weirdly or incorrectly.
EDIT (more information):
The problem is that if you check in chrome or similar, the main horizontal menu is working properly. You don’t have to hover on the text to allow the link to be clickable. However, in IE6 and IE7, this is not the same. In IE6 and IE7, you have to hover over the actual text in order to make the dropdown menu to appear.
Anyways, if anybody could provide some insight, it would be much appreciated.
Thanks!
If you use developer tools in IE then you will see that there are 2 sets of styles….
This is what I did to resolve the issue:
– If I uncheck/remove all the styles in
#nav_wrap ul.menu > li > a– Remove
position:relativeandheight:40pxfrom#nav_wrap ul.menu > li aI am not sure if you need those classes but doing the above makes the entire block clickable as opposed to just the text in IE7. I havent tested in IE6.