Accordion Menu :: CSS & Opacity

[BariCarroll]

1) Script Title:
Accordion Menu script
Version: Glossy Accordion Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

3) Describe problem:
This is likely out of scope for the folks on this forum, but I'd like to implement the Accordion Menu script on my website (URLs below). I can get it to work perfectly in Firefox but am having issues with IE (what's new, right?). In summary, what I'm trying to achieve is to have the entire menu at an opacity of 50% *except* for the section and page the user is currently viewing. Those menu items should have full opacity.

In addition, I'd like the menu items to switch to full opacity if I hover the mouse over them. Again, this works perfectly in Firefox, so I invite you to view my site in Firefox first to see how it looks before switching to IE.

I admit that I'm a noob when it comes to CSS... But, as you probably know, if you "position" an element in CSS, then the opacity setting will work in IE. I've tried setting zoom to 1 and I've tried setting width to 100% (both of which have worked for me in the past). However, when I try either of those options, it causes the line spacing to expand to the point of ridiculous in IE.

Does anyone have any thoughts on a possible solution? I'd appreciate it.


http://www.seethebook.com/sample_one/sample_one.php
http://www.seethebook.com/_stylesheets/second_level.css

FYI: I added two new styles to achieve the "current" page look:
> .glossymenu div.submenu #currentpage
> .glossymenu div.submenu .test {

[rangana]

Hi BariCaroll,
I'm afraid IE don't understand opacity...add a "filter:alpha(opacity=100)" instead.

Note that Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.

In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

As to your requirement of having a full opacity during hover...I had difficulty locating which image do you prefer as you have plenty of image in your code and a number of external css :D

Anyway, you could do it with:
Let's say name is the name of your menus you want to have full opacity when hover...also if it's a class then use the "." if its and id use the "#". It would be like this:

.name:hover{opacity:0.0;filter:alpha(opacity=100);}
#name:hover{opacity:0.0;filter:alpha(opacity=100);}

See if it helps :D