Top-of-forum navigation not working?

[GREYtheFLAILER]

My forum (best viewed in Chrome, still in the works): valor.boards.net/index.cgi

Under the information table and just above the actual forum boards, the little navigation ( "VALOR :: Home, etc" ) doesn't seem to be clickable. My mouse changes, as though it's momentarily working, but doesn't actually work when I hover over the word "VALOR" itself. I imagine I have some sort of code conflicting with this working, but can't seem to find out which code it is.



All help is appreciated, thank you!

[meghansarasan]

It might be the way your nav selectors are named.

Try changing this:
.nav:link     { font-size: 10px; text-decoration: none; color: #bfb799; }
.nav:visited  { font-size: 10px; text-decoration: none; color: #bfb799; }
.nav:hover    { font-size: 10px; text-decoration: none; color: #bfb799;  text-decoration: underline; }

To this:
.nav a:link     { font-size: 10px; text-decoration: none; color: #bfb799; }
.nav a:visited  { font-size: 10px; text-decoration: none; color: #bfb799; }
.nav a:hover    { font-size: 10px; text-decoration: none; color: #bfb799;  text-decoration: underline; }

If that doesn't work, I can't be much help. I'm decent with CSS but javascript is out of my league.

[GREYtheFLAILER]

That didn't work, unfortunately. :c

[meghansarasan]

Let's try two more things before someone else gives it a go.

First, this one: condenses the nav selectors down and specifies a style for a:active
.nav a:link, .nav a:active, .nav a:visited { font-size: 10px; text-decoration: none; color: #bfb799; }
.nav a:hover { text-decoration: underline; }

If that one doesn't do anything, then try this one (when I view the div with an addon its name is a.nav, so who knows?)
a.nav a:link, a.nav a:active, a.nav a:visited { font-size: 10px; text-decoration: none; color: #bfb799; }
a.nav a:hover { text-decoration: underline; }

[meghansarasan]

Actually, nix that. I think I found a problem.

<div id="posbox2">  
    <br><img src="http://i.imgur.com/pyzwbgI.png"/></a>
<div style="font-family: verdana; font-size: 10px; line-height: 90%; text-align: justify; overflow: auto; height: 180px; padding: 8px; float: center; color: #8f8972; text-shadow: 2px 2px 2px #000000">Nam luctus sollicitudin sodales. Pellentesque arcu sem, tempor sed mollis in, dictum at tellus. Sed in sem vitae leo consequat suscipit. Aliquam commodo purus quis sapien egestas consequat. Vestibulum nec magna lobortis eros commodo vestibulum non eu purus. </div>
</div>

The height on this (180px) exceeds the container box, and it seems like it's overlapping your navigation. Try setting the height for this div to around 125px and see if that helps.

If you need that div to be 180 pixels high, you could set the overflow settings for the posbox2 itself. 
<div id="postbox2" style="overflow-x: hidden; overflow-y: auto;">

[GREYtheFLAILER]

Worked like a charm. Thanks again.<3

/isobviouslygreatwithcoding

[meghansarasan]

You're most welcome. :] You seem to be doing well so far, the layout is great and your design is beautiful. Just keep it up and you'll get the hang of it.