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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question CSS hover effect will not work

    Its very strange, I had it working for a little while and then all of the sudden it stopped working. I'm pretty sure I didn't touch any of my code relating to my navigation bar. If anyone can let me know what is wrong that would be greatly appreciated. Heres my code. (The hover effect is not working for my navigationbar)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Revision 2</title>
    
    <style type="text/css"> 
     body{
    	 width:90%;margin:auto;min-width:600px;max-width:5000px;
     		background-image: url('background3.jpg')
    }
    	#header {
    		position:absolute;
    }
    	#logo {
    		position:absolute;
    		top: -70px;
    		left: -70px;
    		z-index: 2;
    }
    	#mainContent {
    		position:absolute;
    		top: 155px;
    		width: 915px;
    		height: 800px;
    		background-color: #CCF;
    		border-bottom-left-radius: 10px;
    		border-bottom-right-radius: 10px;
    		border-top-left-radius: 10px;
    		border-top-right-radius: 10px;
    		overflow: hidden;
    }
    	#mainNavigationBar {
    	position:absolute;
    	top: 100px;
    	width: 913px;
    	height: 45px;
    	background-color: #CCF;
    	overflow: hidden;
    	border-bottom-left-radius: 10px;
    	border-bottom-right-radius: 10px;
    	border: solid 1px white;
    }
    	#mainNavigationBar a {
    		color: #666;
    		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    		font-size: 14px;
    		text-decoration: none;
    		display: inline-block;
    		line-height: 45px;
    		padding-left: 10px;
    		padding-right: 10px;
    }
    	#mainNavigationBar a: hover {
    		color: #0C6;
    		background-color: #0CF;
    	}
    	</style>
    </head>
    
    <!------------------------------------------------------------------------>
    
    <body>
    	<div id="wrapper"> <!--Wrapper containing all website elements-->
        	<div id="header">
    			<a href="#"><img src="header3.jpg" /></a>
        </div>
        	<div id="logo">
    			<a href="#"><img src="logo.png" /></a>
    	</div>
        	<div id="mainContent"> <!--This is the main box of the site-->
        </div>
        	<div id="mainNavigationBar">
            	<a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
                <a href="#">Home</a>
        </div>
        
    </div> <!--Final wrapper div-->
        
    </body>
    </html>
    Last edited by Xellic; 11-19-2012 at 02:55 AM.

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    take away this here'm
    Code:
    #mainNavigationBar a {
    		color: #666;
    		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    		font-size: 14px;
    		text-decoration: none;
    		display: inline-block;
    		line-height: 45px;
    		padding-left: 10px;
    		padding-right: 10px;
    }
    	#mainNavigationBar a: hover {
    		color: #0C6;
    		background-color: #0CF;
    	}

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Xellic,
    You have a space where one does not belong. You can find little mistakes like that by validating your code. See the links in my signature line about validation.

    #mainNavigationBar a: hover should look more like this -
    Code:
    #mainNavigationBar a:hover {
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Nov 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Xellic,
    You have a space where one does not belong. You can find little mistakes like that by validating your code. See the links in my signature line about validation.

    #mainNavigationBar a: hover should look more like this -
    Code:
    #mainNavigationBar a:hover {
    Okay well this is very strange. I have fixed that error and for some reason the first 5 pages do not have the hover effect. However, any pages after this first 5 do have the effect. o.o
    Last edited by Xellic; 11-19-2012 at 02:04 AM.

  • #5
    New Coder
    Join Date
    Nov 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hmm nevermind, it seems that I managed to get it working when I added a 'z-index'.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    You don't need all that absolute positioning. See the pitfalls of absolute positioning.
    You might consider just letting the document flow naturally instead. Floats and margins will make your layout look just fine.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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