CSS or HTML error?

[Priapus]

Howzit guys.

I'm busy making a new website. Now, I am trying to get my menu working. Which I have done. However, only one link/button isn't working. I just can't figure it out. When I load the page up in IE, I see all the other buttons, just not this one that is missing. However, having my mouse pointer there, I can still click on it.

So, looks like the image is missing. Which is what I am using to make this, rolover menu.

Any help would be great!

Thanks!

CSS:

#page-container {
         width: 760px;
         margin: auto;
	      
}

html. body {
       margin: 0;
       padding: 0;
       background: #ffffff;
       }
       
       body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background: #ffffff;
}

 .hidden {
          display: none;
          }
          
/* Main Navigation */
#main-nav { height: 50px}
#main-nav dl {margin: 0; padding: 0;}

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 11px; } 
/*/ 
#main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#main-nav dt {float: left;}

                 }
#main-nav dt a {
	display: block;
	height: 0px !important;
	height /**/:50px; /* IE 5/Win hack */ 
	padding: 50px 0 0 0;
	overflow: hidden;
	background-repeat: no-repeat;
}

#main-nav dt a:hover {
	background-position: 0 -50px;
}

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 71px; background-image: url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
	background-position: 0 -100px;
}


 #sidebar-a {
            float: right;
            width: 280px;
            line-height: 18px;
            }
 #sidebar-a .padding {
             padding: 25px;
          
            }
 #content {
          margin-right: 280px;
          line-height: 18px;
        
          }
 #content .padding {
           padding: 25px;
           }
                 
 #header {
      
          height: 150px;
          background: #db6d16
	            url(../images/headers/about.jpg);
          }
                 
 #footer {
         clear: both;
         height: 66px;
         font-family: Tahoma, Arial, Helvetica, San-serif;
         font-size: 10px;
         color: #c9c9c9;
         text-decoration: none;
         border-top: 1px solid #efefef;
         padding: 13px 25px;
         line-height: 18px;
         }
 #footer a:hover {
            color: #db6d16;
            text-decoration: none;
            }
#footer #altnav {
         width: 350px;
         float: right;
         text-align: right;

         } 
 h1 {
    margin: 0;
    padding: 0;
    float: right;
    margin-top: 57px;
    padding-right: 31px;
    
    }
    
    #content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

#content p {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
}

This is the HTML for the menu NAV:

<div id="page-container">
<div id="main-nav">
         <dl>
      
          <dt id="about"><a href="#">About</a></dt>
          <dt id="Services"><a href="#">Services</a></dt>
          <dt id="portfolio"><a href="#">Porfolio</a><dt>
          <dt id="contact"><a href="#">Contact</a></dt>
          
          </dl>

It's the services one that isn't working. The rest are.

 

[Priapus]

#main-nav dt#services,
#main-nav dt#services a { width: 71px; background-image: url(../images/nav/services.gif); }

<dt id="Services"><a href="#">Services</a></dt>

Not anything to do with a capital 'S' on services in the HTML, and a lower case 's' in the CSS is it?

Jon

Bingo. Well done.

Thanks bud, problemo solved! I keep doing that - bad habit.

If anyone has time...I need to change the backround. However it doesn't seem to be working?

Any ideas?

Thanks, Butters for the help as well.

 

[Priapus]

Do you know, I looked at thoses 'S's and thought, Hmmmm. It's always something annoyingly simple.

Change the background to what?

Also, why do you have html.body then another body? I dont think there is a need for this.

I'm still new to this whole CSS thing. So forgive me.

I want the color outside the page border to be back/grey type, like a two toened thing.

The HTML body is for margin and paddin...I think?

 

[Priapus]

Thanks a lot for the help, Butters! Appericated!