Nav code problem [punBB]

Everything works fine on the nav bar - a, a:hover - except the 'active' part, it reverts back to the original 'a'.

Here's the code I've created and would like feedback on either what is wrong with this code, if it's a browser issue (Firefox), or if it's a tech issue, please:

Code:

#pun-navlinks {
        margin: 5px auto;
        max-width: 825px;
        min-width: 825px;
        background-color: transparent;
        background-image: url('http://i60.servimg.com/u/f60/14/50/54/28/lotusn11.png');
        background-position: top center;
        background-repeat: no-repeat;
        }

#pun-navlinks ul li a {
        width: auto;
   padding: 5px;
   margin: 150px 0px 0px 1px;
   text-align: center;
        vertical-align: text-bottom;
   text-decoration: none;
        color:#ffffff;
        letter-spacing: 2px;
        border-top: 2px solid #50443D;
        border-right: 2px solid #50443D;
        border-left: 2px solid #50443D;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-topright: 7px;
        -webkit-border-top-left-radius: 7px;
        -webkit-border-top-right-radius: 7px;
        background-color: #0D0805;
        }

#pun-navlinks ul li a:visited {
   text-decoration: none;
        color:#ffffff;
        letter-spacing: 2px;
        border-top: 2px solid #50443D;
        border-right: 2px solid #50443D;
        border-left: 2px solid #50443D;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-topright: 7px;
        -webkit-border-top-left-radius: 7px;
        -webkit-border-top-right-radius: 7px;
        background-color: #0D0805;
        }

#pun-navlinks ul li a:hover {
        background-image: url('');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color:#50443d;
        border-top: 2px solid #A5A5A5;
        border-right: 2px solid #A5A5A5;
        border-left: 2px solid #A5A5A5;
        color:#000000;
        height:100%;
        text-align: center;
        text-decoration: none;
   }

#pun-navlinks ul li a:active {
        background-image: url('');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color:#50443d;
        border-top: 2px solid #A5A5A5;
        border-right: 2px solid #A5A5A5;
        border-left: 2px solid #A5A5A5;
        color:#000000;
        height:100%;
        text-align: center;
        text-decoration: none
        }

#pun-navlinks ul li a:focus {
        background-image: url('');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color:#50443d;
        border-top: 2px solid #A5A5A5;
        border-right: 2px solid #A5A5A5;
        border-left: 2px solid #A5A5A5;
        color:#000000;
        height:100%;
        text-align: center;
        text-decoration: none
        }

#pun-navlinks ul li a:this {
        background-image: url('');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-color:#50443d;
        border-top: 2px solid #A5A5A5;
        border-right: 2px solid #A5A5A5;
        border-left: 2px solid #A5A5A5;
        color:#000000;
        height:100%;
        text-align: center;
        text-decoration: none
        }

As you can see, I've even tried adding the '.this a' code (and previously tried the 'a:this' code) and it's still not working.
Thanks in advance.

Wait what does it do?

It's a code so when you click on a tab that tab should be a different color when you are on that tab's page. But it's still not working.... so... bump

Kyouri wrote:It's a code so when you click on a tab that tab should be a different color when you are on that tab's page. But it's still not working.... so... bump

Hello,

Its not like that. The :active pseudo class doesn't work that way.
A link is said active when you click it. But, as soon as you click somewhere else, it will become inactive.

Does that mean if you click somewhere else on that tab's page that the tab will no longer remain the 'active' color? Is that a glitch with FM, cause to the best of my knowledge of visiting several internet sites, the page you're viewing has that tabs color set to be different than the other tabs until you click on another tab. Once you go to a different page, then that page's tab becomes the 'active' color. That's how I understand it to work. If that is right, then it's not working on my board.

Forumotion has no glitch. The active tab color thing you see on other sites is achieved by adding a special CSS class.

There are no special CSS class assigned to active tab on Forumotion forums, so its not possible for us.

---

An element is considered active when you click it. As soon as you click somewhere else, the previous one will go inactive and no 2 elements can remain active together.

Ok, no offense, but I do understand that two elements cannot be active at the same time (ie, two pages open in the tabs of your browser - only the page you are on has the highlighted tab while the others remain shadowed [inactive]).

As for the special class, I assume you are saying that the special class I tried to add '#pun-navlinks ul li a:this' is what you are referring to as not being an available class to add to Forumotion's CSS, as that is the code that seems to work on other sites? If you would please, if the 'active' code isn't the code that should remain in active color on FM, what is the 'focus' code for? Perhaps I'm getting them confused. And btw, thanks for responding to this thread.

To make the active tab and shadowed tab thing is not possible with the :active class. The main purpose of using :active is different that what you are thinking.

On other sites, a completely different technique is utilized to apply this effect. You should try searching some tutorials on the active pseudo class.

Sorry if I confuse you.