Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Difficulty with link hovers in FF and Opera

    Here's the page...

    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:

    Code:
    #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:

    Code:
    <!--- 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!

  • #2
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    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?

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You're almost there... it's the order of the psuedo-elements, not the order of the divs, that matters:
    Code:
    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.

  • #4
    Regular Coder harlequin2k5's Avatar
    Join Date
    Sep 2005
    Location
    Holiday, FL
    Posts
    635
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    BTW, this really belongs in the html/css forum, not the site reviews one.
    Oops - sorry about the mis-post

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

    Thank you so much rmedek!

  • #5
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    Quote Originally Posted by harlequin2k5
    Oops - sorry about the mis-post
    No problem, I'll move it on over that way.
    OracleGuy


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •