Resolved CSS hover effect will not work

Xellic · 11-18-2012, 10:31 PM

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>

elhippie · 11-19-2012, 12:09 AM

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;
	}

Excavator · 11-19-2012, 12:20 AM

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 {

Xellic · 11-19-2012, 01:01 AM

Quote:

Originally Posted by Excavator

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

Xellic · 11-19-2012, 01:56 AM

Hmm nevermind, it seems that I managed to get it working when I added a 'z-index'.

Excavator · 11-19-2012, 02:16 AM

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.