facebook  linkedin  Twitter  skype  Rss googlePlus

Div Over DropDown

Jan 08 2004

Well here I am again with another article that I hope will help you in your quest for the perfect site or application. In this article I am actually going to talk a bit about JavaScript and an issue in Internet Explorer. If you have ever tried to create a paragraph of text that shows up when you click on a button or hover over a word then you may have come across the issue as I did. The issue is that if you use a

tag to hold your text and then change its display from "none" to "block" and your placement of the
falls over a dropdown or listbox the dropdown or listbox will cover up your text.

This is because the listbox and dropdown are actually derived from Windows form controls, not web based controls. Now in my quest for a solution I have come across multiple solutions. The first is to just rearrange your page. Well sometimes we just can't do that because it is out of our hands. The second is to hide any controls that might fall under the

when it is shown and then show them when it is hidden. I don't like this idea because it makes it seem like something has changed on the form. So if I did not look at the values of the dropdown or listbox then, at least to me, it seems like it may have changed and I would like to know why, even if it did not actually change. Just a pet peeve I guess. The third option and the one I have taken and improved upon was quite clever.

This new method was created by Joe King, Sample for using a DIV IFRAME shim to cover over SELECT Boxes and other windowed controls in IE. His idea was to use an

In the example above you can run your mouse over the help image and you will see how the text is show over the dropdowns. Also something to note is this is an Internet Explorer issue so NO it has not been tested with Netscape or Opera or any other browser.

The code above shows the source of the image,

About the Author, Staff

You can write for Santry.com, just email us at [email protected] for more information.

blog comments powered by Disqus


Thank you for visiting our site, before you leave, please visit some of the areas or information you may have missed.

Popular Articles