Multiple css hovering effects problem

Hello, I am having trouble creating the button rollover effect using css. I have been following this tutorial:

http://www.elated.com/articles/css-rollover-buttons/

but the button does not appear. I double have checked the image path and the dimensions. (It is a 60x120 image)

I am wondering if the other hovering effect is causing problems. The top of my webpage right now also has another hovering effect, but its for the navigational header. The text changes colors when we hover over it.

Thanks for your help!




/* ========================== CSS Reset ========================== */
* {
border: 0 none;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

/* ========================== General Styles ========================== */
body {
/*background: url("images/bg_body.jpg") repeat top left;*/
text-align: center;
}

#wrapper {
margin: 0 auto;
text-align: left;
width: 940px;
}

a {
color: #a32626;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a.top {
background: url("images/bg_top.jpg") no-repeat 0% 50%;
color: #E68480;
font-size: 13px;
padding-left: 25px;

}

a.top:hover {
color: #bbb;
text-decoration: none;
}



/* ========================== Social Icons Hover ========================== */

#facebook
{
display: block;
width: 60px;
height: 60px;
background: url("images/facebook.jpg") no-repeat 0 0;

}

#facebook:hover
{
background-position: 0 -60px;
}

#facebook span
{
position: absolute;
top: -999em;
}



blockquote {
background: url("images/blockquote.png") no-repeat top left;
margin-bottom: 25px;
padding-left: 32px;
}

blockquote p {
font-style: oblique;
margin-bottom: 5px;
}

blockquote p.author {
color: #99C93C;
font-size: 11px;
font-style: normal;
}

em {
font-style: oblique;
}

h1 {
color: #99C93C;
font-size: 180px;
}


h2 {
border-top: 1px solid #555;
color: #99C93C;
font-size: 24px;
margin-bottom: 35px;
padding-top: 17px;
}

h3 {
color: #99C93C;
font-size: 21px;
margin-bottom: 20px;
}

h4 {
color: #99C93C;
font-size: 18px;
margin-bottom: 20px;
}

h5 {
color: #99C93C;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}

h6 {
color: #99C93C;
font-size: 30px;
margin-bottom: 20px;
margin-left: 50px;
}

h7 {
border-top: 1px solid #555;
color: #A32626;
font-size: 24px;
margin-bottom: 35px;
padding-top: 17px;
}

img {
margin-bottom: 15px;
}

img.left {
margin: 0 20px 15px 0;
}

img.right {
margin: 0 0 15px 20px;
}

img.icon {
border: none;
margin: 0 12px 10px 0;
}

li {
background: url("images/bullet.jpg") no-repeat 0% 50%;
color: #E68480;
font-size: 13px;
line-height: 21px;
padding-left: 18px;
}

ol {
list-style-position: inside;
margin-bottom: 20px;
}

ol li {
background: none;
padding: 0;
}

p {
color: #E68480;
font-size: 13px;
line-height: 21px;
margin-bottom: 20px;
}

p.featured {
background-color: #333;
color: #d5d5d5;
font-size: 15px;
line-height: 24px;
padding: 15px 20px;
width: 180px;
}

p.featured.right {
margin-left: 15px;
}

strong {
font-weight: bold;
}

ul {
list-style: none;
margin-bottom: 20px;
}

.left {
float: left;
}

.right {
float: right;
}


/* ========================== Header Styles ========================== */
#header {
background: url("images/bg_header.png") no-repeat top left;
height: 111px;
overflow: hidden;
padding: 35px 20px;
position: fixed;
top: 0px;
width: 900px;
z-index: 1000;
}

#header ul {
float: right;
}

#header ul li {
background: none;
float: left;
height: 111px;
line-height: 111px;
margin-left: 20px;

padding: 0px;
}

#header ul li a {
color: #99C93C;
font-size: 24px;

}

#header ul li a:hover {
color: #d2d2d2;
text-decoration: none;
}




/* ========================== Intro text Styles ========================== */
#intro {
color: #99C93C;
font-size: 35px;
line-height: 42px;
margin: 79px 0 0 0;
}

#hours {
margin-bottom: -25px;
overflow: hidden;
padding-top: 30px;
}



/* ========================== Home Styles ========================== */
#home {
margin-bottom: -25px;
overflow: hidden;
padding-top: 150px;
}

#home li {
background: none;
float: left;
margin: 0 20px 20px 0;
padding: 0;
position: relative;
width: 220px;
}

#home li.last {
margin-right: 0;
}

#home li img {
border: 4px solid #222;
margin: 0;
}

#home li img:hover, #home li:hover img {
border: 4px solid #444;
}

#home li .description {
background-color: #444;
color: #000;
display: none;
font-size:10px;
padding: 8px 10px;
position: absolute;
}

#colsContainer {
margin: 0px 0px 0px 0px;
overflow: hidden;

}

#side-a {
float: left;
width: 560px;
overflow: hidden;
}

#side-b {
padding-top: 25px;
text-align: right;
width: 380px;
overflow: hidden;

}


/* ========================== Layout Styles ========================== */
.page {
margin-bottom: 100px;
overflow: hidden;
padding-top: 150px;
}

.box_220, .box_300, .box_620 {
float: left;
margin-right: 20px;
}

.box_220 {
width: 220px;
}

.box_300 {
width: 300px;
}

.box_620 {
width: 620px;
}

.last {
margin-right: 0;
}






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Raw Possibility</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<!-- jQuery Script -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!-- Contact Form Script -->
<script type="text/javascript" src="js/form.js"></script>
<!-- Scroll Script -->
<script type="text/javascript" src="js/scroll.js"></script>
<!-- Slider Script -->
<link rel="stylesheet" type="text/css" media="screen" href="presentation/nivo-slider.css" />
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>


</head>

<body id="top">
<!-- BEGIN: wrapper -->
<div id="wrapper">
<!-- BEGIN: header -->
<div id="header">
<ul>
<li><a href="#home" title="Link">home</a></li>
<li><a href="#about" title="Link">about me</a></li>
<li><a href="#elements" title="HTML Elements">my menu</a></li>
<li><a href="#contact" title="Link">contact me</a></li>
</ul>
</div>
<!-- END: header -->


<!-- BEGIN: home -->
<div class="page" id="home">

<h1>hello! I am,</h1>
<div id="colsContainer" style="margin-top: 0px;">

<div id="side-a">
<h6>vegan</h6>
<h6>healthy</h6>
<h6>delicious.
</h6>
<div style="margin-top: 50px;">
<img src="images/Hours.png"/>
</div>
</div>

<div id="side-b">

<a id="facebook" href="#" title="facebook"><span>facebook</span></a>

</div>


</div>


</div>
<!-- END: home -->

</body>
</html>

Could you also post a picture of the folder structure from the top of the navigation bar where the images are kept :)

Any style rule you apply to just the <a> tag will affect ALL <a> tags in your document.

Specificity (http://reference.sitepoint.com/css/specificity) is just what it sounds like. Giving an element a specific class or id so that ONLY it will be styled the way you want.