PDA

View Full Version : Problem with Drop down/ Overlapping Content script in IE



sumer
02-29-2008, 12:43 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: Script is working perfectly with Firefox, Safari and Opera but in IE when I attempt to mouse over the drop down content it disapears.

I cant work it out.

Here is the page in question:


Here is the css for the drop down content:

#menu_items{background:#f8f8f8; margin-top: 3px; width: 200px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px;}
#menu_items2{background:#f8f8f8; margin-top: 3px; width: 220px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px;}
#menu_items3{background:#f8f8f8; margin-top: 3px; width: 200px; padding: 10px; text-align: left; color: #06c; border: 1px #ccc solid;border-bottom: 1px #ccc solid; line-height: 15px; text-align: right;}


Any help would be much appreciated.

Phil

jscheuer1
02-29-2008, 03:40 PM
In IE, due to the lack of background to the about_content and similar divisions (the drop downs), IE thinks that the mouse is off of them while passing over their transparent regions. Add:


background-color:white;

to their style. Example:


<div id="about_content" style="background-color:white; position:absolute; visibility: hidden; padding-top: 10px;">

sumer
02-29-2008, 09:36 PM
Thanks very much John, thats fixed it.
:)

jscheuer1
03-01-2008, 05:42 AM
You're welcome. There is a more complex solution that can maintain the transparent sections, at least in IE 7 and non-IE browsers, perhaps even in IE 6 and 5.5. But I won't go into that unless you are sincerely interested. It would involve applying separate styles depending upon which version of IE was being used to view the page.