a:hover not working

I havent done css/html in awhile but I just started doing it again to keep it fresh. I finished the whole coding of the layout but the navbar hover still doesnt work. It would be much appreciated if someone can help me out.

HTML code

 
        <div class="nav_left"></div>
 	<div id="navigation">
           <ul id="menu">
             <li class="nav_split"> <a href="#">Home </a></li>              
             <li class="nav_split"> <a href="#">Properties</a></li>   
             <li class="nav_split"> <a href="#">Sublets</a></li>   
             <li class="nav_split"> <a href="#">Landlords</a></li>   
             <li class="nav_split"> <a href="#"> Resources</a></li>   
             <li class="nav_split"> <a href="#">Contact Us</a></li>   
     	   </ul>
        </div>
	<div class="nav_right"></div>
        <br class="clear" />

Code (markup):

CSS code

/*Navigation Menu*/
.nav_left {
	background:transparent url(../images/nav_left.gif) no-repeat top left;
	height:42px;
	width:4px;
	float:left;
}
.nav_right {
	background:transparent url(../images/nav_right.gif) no-repeat top right;
	height:42px;
	width:4px;
	float:right;
}
#navigation {
	background:url(../images/nav_bg.gif) repeat-x;
	width:1098px;
	color: #FFF;
	font-size:15px;
	font-weight:bold;
	list-style-type:none;
	height:42px;
	float:left;
	position:relative;
}

#menu li{
	float: left;
	padding: 11px 0 0 0;
	height:42px;
}
#menu li a{
	color: #FFF;
	text-decoration:none;
	font-size:15px;
	font-weight:bold;
	margin: 0px 30px 0 30px;	
}
#menu li a:hover {
	background: url (../images/hover_bg.gif) repeat-x;
	text-decoration: underline;	
	height: 42px;
}
.nav_split{
	background: url(../images/nav_div.gif) no-repeat top right;
}

Code (markup):

the hover doesnt show the image, the underline is the only that works. I am boggled as I have looked at other similar examples that work great.

 

remove spaces between "url" and "(../images/hover_bg.gif)"

background: url (../images/hover_bg.gif) repeat-x;

Code (markup):

 

The 'a' element is natively inline, therefor height does not apply. That may not affect your issue, but except for IE≤7, all browsers will ignore the height property.

You may declare a {display: block;} if you want height.

cheers,

gary

 

Space between "url" and the var following makes the browser cannot understand.

 

yea that space after the url did the fix of displaying the hover. However that only shows the hover image directly behind the text and doesnt fill the box. Anymore help would be really appreciated

 

Did you not read my comment?

 

yea I saw it and tried it out but it didnt do anything different

EDIT: I missed the part where you said it should be in the 'a' not the 'a:hover' part. That did fix it tho. One last thing, not important if I dont get it but im looking for perfection lol, the hover now is in the middle like its supposed to but it covers the vertical divider on the right hand side of it.

Not sure if its solveable but I thought someone might know the trick

 

Show me your exact coding.

 

oops I was editing when you posted.

EDIT: Picture included

 

the site very nice.

 

thank you!

 

My suggestion is, you need to include what kind of tag you are trying to make a style. I am talking about the ul.
Removing the url(../images/nav_left.gif) is okay too.

Try this CSS code:

/*Navigation Menu*/
#navigation {
background: url(images/nav_bg.gif) repeat-x;
width: 1098px;
color: #FFF;
font-size: 15px;
font-weight: bold;
list-style-type: none;
height: 42px;
float: left;
position: relative;
}

ul#menu li{
float: left;
padding: 11px 0 0 0;
height:42px;
}
ul#menu li a{
color: #FFF;
text-decoration: none;
font-size: 15px;
font-weight:bold;
margin: 0px 30px 0 30px;
}
ul#menu li a:hover {
background: url (images/hover_bg.gif) repeat-x;
text-decoration: underline;
height: 42px;
}
ul#menu li.nav_split{
background: url(images/nav_div.gif) no-repeat top right;
}