SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a:hover doesn't work in Firefox

    Hello there,
    Usually the problems I have are all to do with I.E. but in this case everything works well in it. However, in Firefox, the a:hover doesn't work. I have tried taking the a:hover out of the #content and placing it independently, but it still doesn't work. The link text should change from dk blue to white on mouseover as you can see in I.E.
    Can anyone spot my mistake, please?

    The webpage is:www.ijacobs.com

    The CSS is:
    Code:
    body {	
    	background-color: #ccccff;
    	background-image: url(../images/pagedesign/background/ij_shadow.jpg);	
    	background-repeat: repeat-x;
    	margin-top: 20px;
    	padding: 0;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000066;
    	}
    
    p {
    	color: #000066;
    	}
    
    #wrapper {
    	position: relative;
    	z-index: 0;
    	background-color:#ddddff;
    	margin: auto;
    	height:1250px;
    	min-height: 1250px;
    	width: 700px;	
    	border: dotted 2px #000066;
    	-moz-border-radius: 20px;
    	}
    #box {
    	background-color: #ddddff;
    	-moz-border-radius: 10px;
    	}
    
    #logo {
    	background:url(../images/pagedesign/index_images/ijacobs_header_prima.png) top left no-repeat;	
    	width: 410px;
    	height: 185px;
    	margin-left: 20px;
    	padding: 10px;
    	}
    	
    #content_title {
    	position: absolute;
    	width: 437px;
    	height: 84px;
    	left: 135px;
    	top: 206px;
    	}
    	
    #content{
    	position: relative;
    	float: left;
    	background:url(../images/pagedesign/index_images/teno.jpg) no-repeat;
    	background-position:center;
    	padding: 15px;
    	text-align: left;
    	width: 500px;
    	min-width: 500px;
    	height: 750px;
    	min-height: 750px;
    	border: solid 2px #000066;
    	top: 199px;
    	left: 90px;
    	}
    	
    #content p {
    	margin: 10px;
    	padding: 10px;
    	}
    
    
    #content a:link, #content a:visited {
    	color: #000066;
    	}
    	
    #content a:hover, #content a:over {
    	color:#fff;
    	}

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't work in Opera 9.01 either. Try removing the invalid a:over selector.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove , #content a: over.
    EDIT: what Tommy said. ^

  4. #4
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, still won't work even though I erased
    HTML Code:
    #content a:over.
    Any other ideas, I'm a bit lost for what to try next.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's still there (in the page you linked to).
    Change this:
    Code:
    #content a:hover, #content a:over {
    	color:#fff;
    	}
    into this:
    Code:
    #content a:hover, #content a.over {
    	color:#fff;
    	}
    (Change the colon into a period in the second selector.)
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Magic, works a treat.
    Thanks so much.


Bookmarks

Posting Permissions

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