Opacity only works on IE on PC

Poster: mfindlay
Dated: Monday August 16 2010 - 6:33:55 BST

Hi, I have been using Milonic for years for our clients' sites, and for this project I am using the ver5_831 (registered today). The problem is that the opacity settings only work on IE for PC. It's been this way for years, and I typically register a version for the client, but actually implement an earlier version to get the opactity to work, but in this case, even an earlier version has a problem I cannot overcome: the foreground menu item becomes as opaque as the background color.

Our menu has a black background and white text. As we increase the opacity to allow the see-through effect, the foreground text also becomes lighter and lighter. (never really a problem in the past since the background color was typically light and the foregound color was the dark color and the fade wasn't really noticeable).

Works for IE on PC, with all others, the foreground text also fades. I don't know if this is just the way it's written, but if there is possibly a way to maintain the regular intensity of the foregound text link colors and only have the background color become opaque, that would be ideal.

Any thoughts? You can see a sample page in action here: http://g2.minisage.com/test/test.php

We're using the following for our overfilter:
overfilter="Fade(duration=0.1);Alpha(opacity=95);";

Thanks for any help!

Re: Opacity only works on IE on PC

Poster: Ruth
Dated: Monday August 16 2010 - 8:55:43 BST

Hi,

A couple of things. First, the overfilter will never work in anything but IE, that is a proprietary MS code i.e. filters and transitions. Opacity goes from 1 through 100 in overfilter, the lower the number the more you can see through the background. It will not affect the text, the reason you are seeing it as seeming to be 'lighter' is that when you can see through the background what's behind it is kind of whitish/yellowish clouds, so a white text will not stand out as much. If you set the opacity number, I think of it as a percentage, set it to 65 or higher, then the white text is fine. If you want it to be more see through, I suggest something like this as the off color #FF9900.

If you want that see through for other browsers, then you need to set it through css and you must be careful since these browsers apply the opacity to the whole thing rather than just the background color of the container. I put it in the .mmpadding class which if you use it you might want to rename that class. So, try this



I blanked the off and on bgcolor in the data file using the // marks. It is now showing based on the css. There is nothing that you can really do about the opacity for other browsers except try to not go much lower than 7 and 8 is better since it will apply to everything, i.e. background and text, I think an image if it were there.

Also, please note that since you have separators which are black and are 3 px wide, that will always be that color because css will not apply to them, they are part of the menu, not part of css. If what you are wanting is that 3px space, you could do that by setting your padding-bottom:4px; in your mmpadding class and since it is now padding and not a separator that will accept the opacity code in the css. Make sure you remove the separator using the // in the menu_data file.

I left the overfilter coding in for IE, though you can do it in the css if you prefer. You would remove the Alpha(opacity=90); and just add filter: alpha(opacity=65); or whatever the opacity see through number you want in the css. In css opacity runs 0 through 1, i.e. 0, .1, .2 etc. to 1.0, and applies to other than IE, the IE code is the alpha and alpha runs 0 through 100; no periods, unless you want to try say 65.5;

I hope this helps. There is also a code called -moz-opacity: which uses the same numbers as opacity. Older FF browsers use that, or mozilla browsers, I guess. Anyway, if you need more help on this just post back

Ruth