Solved

DIV loses focus when HTML select control option is hovered over in IE

Posted on 2011-09-09
3
603 Views
Last Modified: 2012-05-12
I added a HTML select control to a div drop-down menus on a website I am starting to develop. When I hover over an option in the HTML select control the div drop-down menu it is contained in, automatically and immediately loses focus and disappears – so it is impossible to select an option in the HTML select control. This only happens in Internet Explorer. It works perfectly in Firefox and Chrome (i.e. you can hover over options and the drop-down menu div remains focused and visible).

Here is the problematic page…
http://www.funasset.net

HTML select controls appear on the Products and Solutions drop-down menus. Both are problematic.

Note: There are no active links on this web page.

I hope someone can help me please!
0
Comment
Question by:funasset
  • 2
3 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36511334
0
 

Author Closing Comment

by:funasset
ID: 36511813
I tried the example provided and it works perfectly in all browsers - even nasty IE. However, implementing it means hacking my code about and changing the way the entire menu system works (which is currently CSS driven).

I think I might remove the select controls from the drop-down menus, but thanks for your great answer.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36512113
Sorry I couldn't help you more.  But please dont' try to "hack" your code. If you can't get something, ask us.

I was going to ask you if you had another way to present those options to the user. It's not a "bad" way necessarily, however you may want to think about the overall user-experience when doing something like that.  Not to mention, as you've just seen, the cross-browser nightmares. ;)
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question