Setting Tabs' & Subtabs' Opacity Renders Them Unclickable ... or Worse!

[TimG]

I recently placed an opacity tag in my Network's custom CSS code (see Test Tab, above, to examine resulting behavior):

/* Change opacity of subtabs in navigation menu */

.xg_subtab {
opacity:0.8;
filter:alpha(opacity=80);
}

I tested the effect on two different Ning Networks, and from two different Windows PCs.

The result was doubly frightening: In Firefox 3.x, the subtabs became non-clickable and tended to slide behind existing page content (e.g. the "Changes to Appearance have been saved!" banner, the About text box, or a simple PNG graphic). In Internet Explorer, another tester reported that the subtabs disappeared altogether!

TEST THIS CSS CODE CAREFULLY ON YOUR NETWORK!

Note 1: Increasing any tab's transparency in this way effectively fades out both the tab's text as well as its background color/image, so don't be surprised if the tab seems to disappear entirely with too low an opacity setting!

Note 2: Problem already reported to Ning via Help (their testing could not duplicate the 'unclickable' aspect of the problem, but revealed the IE issue of the subtabs disappearing).

[TimG]

The original intent of changing my tabs' opacity was to prevent them obscuring the header image. To be more specific, when the tabs (with white text) lacked a background color, they were difficult to read against the light portions of the header image. So I added a medium gray background color to the tabs... which caused the tabs to appear blocky, and they now obscured a significant portion of the header.
I decided to try setting the tabs' opacity in order to reveal a visual hint of the header image, which is an integral part of my network's "branding."
It'd probably be easier to revert back to unadorned tabs with slightly darker text. Thanks for the feedback!

[aloftgroup]

Yes I too think that my tabs look blocky and hide my header image. I have tried all different codes and nothing seems to make JUST the tabs turn transparent.