Resolved CSS hover effect will not work [Archive]

...

View Full Version : 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)

<!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"> 
<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"> 
</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> 

</body>
</html>

elhippie

11-19-2012, 12:09 AM

take away this here'm

#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

Xellic

11-19-2012, 01:01 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 -
#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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
You might consider just letting the document flow naturally instead. Floats and margins will make your layout look just fine.