Lost my CSS opacity in FF

[redtopia]

http://www.jhcenterforthearts.org

Not sure why, but my opacity setting is not working in FF after upgrading to 5.813.

in my menu definition:

offclass="mainMenu";
onclass="mainMenu";

in my CSS file:

.mainMenu {
font-family:Arial,Helvetica,san-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
opacity:.88;
-moz-opacity:.88;
text-transform:uppercase;}

This used to work, but doesn't anymore. Is there another way to get opacity to work in FF?

[Ruth]

Hi,

I think you're going to have to upgrade to 5.818 and see if that fixes your issues. Then we can go from there.

Ruth

[redtopia]

Well, I ended up rolling back to 5.748, which solved both the vertical alignment in the header, as well as the CSS opacity setting. Now the menus work like they did before I upgraded, though I wish I had time to figure out how to achieve the same results with the most recent menu code.

http://www.jhcenterforthearts.org

This version (5.748) works perfectly on both IE and FF & Safari. When I update to 5_818, it falls apart as follows:

FF: Opacity (set via CSS) no longer works
IE: Submenus appear directly below the header image and are not attached to the main menu.
Safari: Opacity (set via CSS) no longer works

[Ruth]

Hi,

OK, here is the issue. For the submenus opening too low, this is a result of the table heights you have set, first the full table as style="height:188" and and then the td where the navHeaderHome is set at 20, and the td where the menu is is set to 168, so the menu is reading that table height as 188, minus 20, leaving the menu, in its figuring at 168, so it is opening the submenus below that. So, either you can do what I did in the previous post, adding a td with a spacer or you can set the td where the span class='navHeaderHome' is as valign='top' height='94', and then in the menu td as height='94' valign='top' that solves the submenus opening at the bottom of the td. And, if you're asking why it worked before, I have to assume the css in the earlier program wasn't correct or wasn't as deeply programmed and as the css things got corrected, things that used to work have to be coded to work as they did. The problems with these things usually occur with relatively positioned menus since they are most often in a table, and the menu itself is made up of tables/td/tr/ divs and spans.

You could also correct this in the menu instead of the page by adding top="offset=-72"; in all the submenus. HOWEVER, the better fix is to do the tables, because if the person needs larger fonts that will change the size of the menu and that offset will then not be correct.

As to the opacity, I have reported that to Milonic. That is something in the programming and will have to be addressed by them.

Ruth

[Ruth]

Hi again

Well, before reporting to Milonic, I tried playing some more with the menu. It turns out that you can get the opacity back by coding the background colors in the classes. This means you will need both an off and on class. This is what I did

main menu will also need padding added in css to take the place of the separator setup you have. The reason being that css does not affect separators so to get that space and not have a white space which does not show the opacity you have to disable the coding for the separtors, the padding, and the off and on bgcolors from the main menu style and add the padding and background-color coding I have in the css classes.

Code: Select all

.mainMenu {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; TEXT-TRANSFORM: uppercase; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,san-serif; TEXT-DECORATION: none; opacity: .88; -moz-opacity: .88;background-color:#ffffff;padding:5px 25px 5px 25px;
}.mainMenuOn {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; TEXT-TRANSFORM: uppercase; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,san-serif; TEXT-DECORATION: none; opacity: .88; -moz-opacity: .88;background-color:#66BD4C;padding:5px 25px 5px 25px;
}

submenu doesn't have the separator problem because you're using an image, so the css classes would be

Code: Select all

.subMenu {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,san-serif; TEXT-DECORATION: none; opacity: .93; -moz-opacity: .93;background-color:#FFFFFF
}
.subMenuOn {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Arial,Helvetica,san-serif; TEXT-DECORATION: none; opacity: .93; -moz-opacity: .93;background-color:#66BD4C
}

Don't forget to call the mainMenuOn, and subMenuOn. Using this the opacity works fine

Ruth

[redtopia]

I tried your fix, and though the opacity seems to have an affect on the darkness of the text, the background image doesn't show through the white background of the menu. Do I need to also modify any of the menu settings?

I would also like to see a better fix for the IE problem than creating a separate table row for the menu. I changed the height of the header table from 100% to 188px, and I also set the height of the table cell that contains the menu to 168px, which still did not solve the problem in IE. According to your best guess, it was the height of the table (being set to 100%) that was the source of the problem, but that doesn't seem to be the case.

[redtopia]

Oh I see... I removed the color parameters from the menu settings and the CSS takes over, and the opacity does work. However, the padding solution doesn't seem to solve the separator issue. When I apply a padding value as you suggested, it has to be exact otherwise the entire main menu doesn't fit properly (needs to be 100%). So if I add another menu item, I would also have to adjust the padding. This just doesn't work because each browser is going to render the text a little bit differently, and there will be no way to force the menu to occupy 100% of the width.

I wonder what has changed from from 5.748 to 5.818 in terms of opacity, because I just don't see how I can apply padding in the CSS to solve the separatorsize problem.

[Ruth]

Hi,

OK, I see the problem. Well, I will have to send something to Milonic. I know what it is doing, but not why or if there is a fix.

The reason that there has been a change is that as time goes on Milonic keeps adding css capabilities and correcting other css attributes so they function as they should. I have the same problem, my site has an old menu because the css was wrong but the look it gave was one I really liked.

I'll post to Milonic and see if there is a way to fix this issue.

Ruth

[ucables.com]

Same problem here, after i updated my milonic menu to last version 5.818, i have lost menu opacity
http://ucables.com

[redtopia]

Any word on this issue yet?

[redtopia]

Still waiting for some help on this... any word?

[Ruth]

Hi,

I'm sorry, but I went out sick just about when you posted and I forgot when I got back about the issue. I just now reported it to Milonic. Again, I apologize I didn't remember it back when you posted

Ruth

[Andy]

Hi,

After a little digging I have discovered that the offclass and onclass classnames were removed from the menu container in version 5.774 almost 2 years ago.

Anyway, the fix is to add CSS properties for the mmenucontainer class.

Therefore, if you add

Code: Select all

.mmenucontainer {opacity:.88; -moz-opacity:.88;}

to your stylesheet, this should add transparency in the browsers that support it.

Let me know once you have upgraded if you still see issues.

-- Andy

[redtopia]

Thanks Andy. Question... what if I want to specify transparency only for the submenu, and not the main menu? Also, what about the on/off state? I only want transparency for the off state. The on state needs to be full opacity so when you move over menu items, the transparency effect is off.