Logo not showing!

[spinenergy]

I'm trying to put my website's logo (logo.jpg) on top of the green banner but nothing is showing. www.beforeicroak.com Here is the CSS stylesheet code for the banner:

/* HEADER */
#header {
margin-bottom:0px;
height:173px;
background: url(images/header-bg.gif) repeat-x;
}

#header h1 {
font: 48px "Georgia";
color:#e4e4e4;
padding:0;
margin:0;
overflow:hidden;
}

#header h1 a {
color:#d4d4d4;
text-decoration:none;
}

#logo {
margin:0;
padding:0;
height:127px;
}

#logo h1 {
padding:17px 0px 10px 20px;
}

#logo h1{
text-indent:-10000px;
}

#logo h1 a {
display:block;
background: url(images/logo.jpg) bottom left no-repeat;
outline:none;
}

#logo .description {
color:#828fa3;
padding-left:20px;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
}

#sf-menu {
margin:0;
height:33px;
padding-top:10px;
}

#sf {
padding:0;
margin:0;
}

#menu {
padding:0;
margin:0;
height:33px;
padding-left:20px;
width:610px;
}

#menu ul {
clear: both;
font-size:12px;
text-transform:uppercase;
padding:0;
margin:0;
}

#menu ul li {
float: left;
display: block;
margin:0;
padding:0;
}

#menu ul li a {
padding: 10px 30px;
margin:0;
float: left;
font-size:12px;
color: #d2d2d2;
text-decoration: none;
line-height:25px;
font: 12px Arial;
margin-right:5px;
background:#363636;
}

#menu ul li a.active {
background:#fff;
border-bottom:1px solid #fff;
color:#444;
font-weight:bold;
}

#menu ul li a.active:hover {
color:#444;
}

#header ul li a:hover {
color:#fff;
}

#searchform {
padding-top:2px;
}

#searchform #s {
width:198px;
color:#000;
background: #696969;
border:1px solid #9e9e9e;
}

#header-ads {
color:#fff;
margin:0;
padding:10px;
height:75px;
padding-top:35px;
}
/* END HEADER */

[resdog]

since the <a> is an inline element, and you have no content in it, there is no width and height. You need to assign a width and height to it (the same width and height of your background image):



height: 127px;
width: 512px;