Despite my most convincing cries to the contrary, I was recently forced to implement a horizontal drop-down navigation system, so I opted for the friendliest one I could find - Son of Suckerfish.
I tested in various browsers on my machine and all appeared to be fine. However, some (but not all!) IE7 users are experiencing an issue where sub menus do not close after they have been hovered over. The most annoying thing is that the affected users are using the exact version of IE7 that I am (7.0.5730.13), with the same privacy and security settings (I even had them send screenshots of the tabs in Internet Options) on the same OS (XP). I cannot verify if Vista is affected or not.
Obviously trying to debug this issue is a nightmare since I cannot replicate it, so I am wondering if anyone here can and might know how to solve it. I have set up an example page here:
http://x01.co.uk/menu_test/
Additionally, there's an annoying flicker on rollover of the sub items which I have also tried to solve with no success, so any help with that would also be appreciated.
This is a problem that occurs in IE7 when another part of the page has focus (ie, you clicked somewhere and then mouse-over the menu). It seems to be an issue with the :hover pseudo-class.
Adding a hasLayout trigger to the :hover style should fix the problem.
#nav li:hover {
position: static;
}
There are other solutions too. There's a great write-up about the problem here:
Sticky Sons of Suckerfish
For testing why not download the Vista IE7 VPC image from MS themselves?
http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B64-B5F1-73D0A413C8EF
Not sure about the bug though. Remember having similar issues I think its because you need a JS. Will try and find out
Related
Does anyone know how to build menus just like the one here using IE6 (this almost works).
Perhaps some version of jquery-ui that works with IE6. I tried also this menu with this css hover fix but in my case it did not fix and that menu does not work either.
I am trying to replace an old applet menu in an old system (i.e. 6 compatible) for something less difficult to maintain and I am running out of ideas.
So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)
And it works fine on desktop and in Android's default Browser.
On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.
I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.
Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.
Everything seems to work fine in Android's default browser, just not in Chrome for Android.
I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.
I just don't understand what's going on.
Thanks.
Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus
What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet.
However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.
Try to remove the class only when the menu has it:
$("#content").bind( "click", function() {
if ($('#mobile-menu').hasClass('open'))
$('#mobile-menu').removeClass('open');
});
EDIT
Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.
Have a look at this: http://codepen.io/anon/pen/jiyHI
After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.
I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.
I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.
I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.
I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.
So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!
I'm stuck. I've never done drop down menus before but wanted to try on a site I'm working on, so I imported someone else's java and css code and got it running just fine in Firefox. Problem is, the drop down menus are appearing way off to the right in IE.
I've created a separate style sheet just for IE, but I haven't been able to figure out what to put on it to correct this!
Here's the site:
http://www.erricksonequipment.com
There is a lot of superfluous nonsense in that style sheet as it was imported from an online example. That said, there may be issues in there too that are preventing ie from reading correctly? I'm not sure.. I'm new to this java/css drop down menu stuff! :)
Any help would be GREATLY appreciated.
The script you're using for the drop down menu is not very good. Also, it's quite possible to create that whole drop down menu using just CSS, without any JS.
The drop down menu, in its current state, does not work in IE7 or IE8.
In the spirit of "fixing your problem":
It will work in IE8 (and Firefox, etc) if you change Line 203 in dropdownMenuKeyboard.js from this:
? (isie ? li.offsetLeft + 'px' : 'auto')
to this:
? 'auto'
However, I recommend you replace the drop down menu code with something more modern.
Be careful when using 'em' as your unit of measurement. The size of 1 'em' is relative to the default font-size set in your browser (or in your CSS if you define it). By default, these font-sizes differ between Firefox and Internet Explorer. I'd recommend using pixels instead, but if you're set on using 'em', just be sure to add a new default font-size in your CSS by doing something like:
html { font-size: 16px; }
By standardizing the default font-size throughout the browser, you won't see any differences in Firefox or Internet Explorer.
This may sound crazy, and i didnt believe it until i saw it for myself.
The vertical scroll bar does not scroll when you click in the space between the scroller or the arrows. You have to drag the bar to get it to scroll. This only happens in the ugly default theme (not windows classic).
The scroll bar has some heavy javascript behind it that drive scrolling of another DIV on the page.
Has anyone even encountered this before? Why the heck does the theme influence IE's rendering?! Only IE!
edit:
this problem happens when you are in "non-classic" XP theme (the default ugly one). switching themes does not cause this, but it does fix it if you switch to classic from the default.
Does it help when you add
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no"><![endif]-->
to your page source? It worked well to work around glitches in IE when a non-classic theme is enabled for me. Note that the conditional comments are there so that firefox does not parse the tag (because it will screw up scrollbars in firefox sometimes).
I just had the same problem with vertical scrollbar in IE7 within the XP theme. After many experiments, I finally found the solution to it. I don't know this solution fits your case.
The container (div#scroll in the example below) with the rendered scrollbars must be larger than 18px. Any number below that will cause the vertical bar disabled.
<div id="scroll">
<div id="fill">
</div>
</div>
The stylesheet, for example:
#fill{
width: 1px;
height: 1000px;
}
#scroll {
width: 18px; /* This has to be larger than or equal to 18. */
height: 50px;
overflow-y: scroll;
}
Thanks,
Grace
In order to avoid certain Windows restrictions, IE re-implements almost all the controls visible on a web page.
The Old New Thing : Windowless controls are not magic
<excerpt>
The Internet Explorer team went and reimplemented all of the controls that a web page would need. They have their own windowless checkbox control, a windowless listbox control,
a windowless edit box, and so on. In addition to reproducing all the functionality of the windowed controls, the Internet Explorer folks also had to reproduce the "look" of the
windowed controls, down to the last pixel. (Functions like
DrawThemeBackground and DrawFrameControl prove extremely helpful here.)
If I recall correctly, the only element that is still windowed is the <SELECT> element.
If you squint, you can see some places where they didn't quite nail it. For example, if you right-click in a text box, options like "Right to left reading order" and "Insert Unicode control character" are missing. As another example, notice that IE's scroll bars do not light up when you hover over them.
</excerpt>
Without seeing the code implementing your page, I would guess that this is another manifestation of "IE's controls don't act native".
If you have a support contract with Microsoft, I'd suggest complaining to them through that channel; if not, see if you get any responses in the microsoft.public.internetexplorer.general newsgroup. Back in IE6, they broke the scrollbar with KB824145 and fixed it with KB832894, so it's not like theses sorts of problems haven't happened and been resolved before.
First, I'll start saying that IE is a terrible browser and in some cases you don't have control over issues while developing a web application.
In that case I haven't encounter such an issue and a Google search don't pull anything on the subject. I'd say it must be something in your code that lead to a weird bug. Most likely it won't break in a lot of systems, so unless it's a very important application (sales, government...) you could leave it that way.
Look at it that way: who change the style of windows to classic? Geeks. And do geeks use IE? No. ^^ ... Joking, but not really.
If it's important I'll need to take a look at your actual code for "The scroll bar has some heavy javascript behind it that drive scrolling of another DIV on the page."
I have a page using <ul> lists for navigation (Javascript changes the styling to display or not on mouseover).
This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.
In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.
I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <div>, not an <iframe>.
Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?
I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.
I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:
$(function () {
$("#primary-nav").appendTo("#footer");
});
Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.
The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.
I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.
Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.
I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.
If you want to check out what CSS hacking is about: click here
If you want to check out some pure CSS menu examples: click here
Hope this helps!
According to this google maps thread, you are correct - an IFrame is inserted by the google code.
You'll need to use the solution which Dan mentioned,
you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists
Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.
Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.
An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.
I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.