2 Replies Latest reply on Feb 26, 2009 1:37 PM by Phrankie

    CSS with TabNavigator: How to outline only the  selectedTab

    Phrankie Level 1
      After some serious CSS experiments I'm still unable to set an ‘outline’ for the 'selected tab' of a tabNavigator . Through CSS I can outline first tab, last tab, or middle tabs ... but that's not what I want.

      I tried adding a borderColor and BorderStyle to the 'selected tab' CSS declaration:

      .tabNavigatorSelectedTabText
      {
      borderColor:#000;
      borderStyle: solid;
      backgroundColor:#C2E5ff;
      }

      No impact.

      The effect I'm trying to achieve is basically the inverse effect of the example on this page:

         http://www.theoreticallycorrect.com/transposer/interfaceTests/TabNavigatorInterface.swf

      To see what I'm trying to achieve, click the 'Scales' tab. This shows the outlined look I want for the selected tab. Simultaneously I want ALL unselected tabs to look like the 'Chords' tab (actually, that's the easy part; just unoutline the various tabs.)

      The real question is: How do I outline the 'selected tab' ???

      Thanks, Phrankie





        • 1. Re: CSS with TabNavigator: How to outline only the  selectedTab
          Phrankie Level 1
          quote:

          Originally posted by: Phrankie
          ... I'm still unable to set an ‘outline’ for the 'selected tab' of a tabNavigator.

          I tried adding a borderColor and BorderStyle to the 'selected tab' CSS declaration:

          .tabNavigatorSelectedTabText
          {
          borderColor:#000;
          borderStyle: solid;
          backgroundColor:#C2E5ff;
          }

          No impact.

          Thanks, Phrankie




          I now understand why this doesn't work. The CSS selector is only for styling the 'text' of the selected tab. Hence the name tabNavigatorSelectedTab Text. I hadn't noticed that detail.

          Too bad there's not a selector for tabNavigatorSelectedTab. Then my problem would be solved!

          Phrankie
          • 2. CSS with TabNavigator: How to outline only the  selectedTab
            Phrankie Level 1
            My erroneous CSS declarations (above) fail silently.

            Is there a CSS validator in Flex? That would allow me to spot CSS code errors and meaningless selectors.

            Phrankie