Difficulty with link hovers in FF and Opera

Here's the page (http://www.suncoastwebdesigns.com/test/susbcba)...

I cannot seem to get my hovers to work in the left or right columns in FF or Opera - seems to work just fine in IE - here's the css:

#left-col {
float: left;
width: 162px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#left-col-nav {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #003399;
margin: 10px;
padding: 10px;
}
#left-col-nav ul, li {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
line-height: 24px;
}
#left-col-nav li a:hover {
color: #003399;
text-decoration: none;
line-height: 24px;
background-color: #FFFFFF;
width: 100%;
}
#left-col-nav li a:link, a:visited, a:active {
width:100%;
display: block;
color: #FFFFFF;
text-decoration: none;
text-indent: 10px;
line-height: 24px;
background-color: #003399;
}
#right-col {
float: right;
width: 162px;
text-align: left;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#right-col-nav {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #003399;
margin: 10px;
padding: 10px;
color: #FFFFFF;
}
#right-col-nav ul, li {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
line-height: 24px;
}
#right-col-nav li a:hover {
color: #003399;
text-decoration: none;
line-height: 24px;
background-color: #FFFFFF;
width: 100%;
}
#right-col-nav li a:link, a:visited, a:active {
width:100%;
display: block;
text-decoration: none;
text-indent: 10px;
line-height: 24px;
color: #FFFFFF;
background-color: #003399;
}


this is the ht/cfml for the columns:

<!--- Open Left Column --->
<div id="left-col">
<!--- Open Left Column Navigation --->
<div id="left-col-nav">
<ul>
<li><a href="index.cfm">Home</a></li>
<li><a href="#">President's Letter</a></li>
<li><a href="#">Bylaws</a></li>
<li><a href="#">Board Members</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Tournaments</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Hall of Fame</a></li>
<li><a href="#">West Zone</a></li>
<li><a href="#">Yearbook</a></li>
<li><a href="#">Guest Book</a></li>
<li><a href="#">Join Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--- Close Left Column Navigation ---></div><!--- Close Left Column --->
<!--- Open Right Column --->
<div id="right-col">

<!--- Open Right Column Navigation --->
<div id="right-col-nav">
<p class="date-style"><cfoutput>#lsdateformat(now(),"dddd m/d/yy")#</cfoutput></p>
<p class="right-col-cats">Address</p>
<p>Suncoast USBC Bowling Association<br />300 S. Duncan Ave.
Suite 217<br />
Clearwater, FL 33755</p>
<p>&nbsp;</p>

<p class="right-col-cats">Bowling Centers

<ul><li><cfoutput query="getcenters"><a href="#centerurl#">#centername#</a></cfoutput></li></ul></p>

<p class="right-col-cats">General Links
<ul>
<li><a href="http://www.bowl.com">USBC Home</a></li>
<li><a href="http://www.bowlingmuseum.com">Bowling Museum</a></li>
<li><a href="http://www.bowlforveterans.org">BVL</a></li>
<li><a href="http://www.floridabowling.com">Florida Bowling</a></li></ul>
</p>


</div><!--- Close Right Column Navigation --->


</div><!--- Close Right Column --->


Any thoughts? FF doesn't hover at all and Opera only hovers on the bowling centers that have no link (#)

Thanks!

I believe I found my own error - feel free to correct me if I'm wrong

In the css code I listed in the previous post - I had the hovers before the active, visted, and link styles - I put the hover styles after and now they seem to work just fine

So, at the risk of sounding like an idiot, the order of the styles matters? In other words, if I have a #mid-col-container and #mid-col-content, the container style should be listed first in the style sheet otherwise even though the container comes before the content in the html the style for the content would come before the style for the container - like this...

#container{blah:blah;}
#content{blah:blah;}

and not

#content{blah:blah;}
#container{blah:blah;}

because then the content style would override the container style?

did that make sense?

You're almost there... it's the order of the psuedo-elements, not the order of the divs, that matters:

a:link { styles }
a:visited { styles }
a:hover { styles }
a:active { styles }

Some people use the mnemonic "LoVe/HaTe relationship" to remember it.

BTW, this really belongs in the html/css forum, not the site reviews one. ;)

BTW, this really belongs in the html/css forum, not the site reviews one. ;)

Oops - sorry about the mis-post :rolleyes:

I'm so glad I had that issue because now the "LoVe/HaTe relationship" makes sense to me

Thank you so much rmedek!

Oops - sorry about the mis-post :rolleyes:

No problem, I'll move it on over that way.