I'm trying to create a rollover effect with some buttons using css. You can see what I am trying to do at http://www.chibabeat.com/test_site/page/17397 . My problem is that the hover effect works when you mouse over the text but I'm wanting the hover effect to work when you hover over the button as a whole. Can anyone tell me what I am doing wrong with the css? The css I am using is

#pic1 {
background: url(http://chibabeat.com/button.jpg) no-repeat;
 position: relative;
font-family: arial, helvetica, sans-serif;
font-size: 130%;
font-weight: bold;
white-space: nowrap;
display: block;
width: 124px;
height: 70px;
text-decoration: none;
line-height: 55px;
vertical-align: middle;
margin: 0; 
padding: 3px 11px 3px 0;
text-align:center;
}
#pic1 a {
text-decoration:none;
color: #000000;
}
#pic1 a:hover{
background: url(http://chibabeat.com/button1.jpg) no-repeat;
 position: relative;
 font-family: arial, helvetica, sans-serif;
font-size: 130%;
font-weight: bold;
white-space: nowrap;
display: block;
width: 124px;
height: 70px;
text-decoration: none;
line-height: 55px;
vertical-align: middle;
margin: 0; 
padding: 3px 11px 3px 0;
text-align:center;
}

Add display:block to your #pic a rules.
And, you should define the 'normal' state button as background for the <a>.

The hover is fixed but now I noticed that I have a large space between my navigation buttons and the content box. When fix the space for IE 7 with padding or margins firefox no longer renders properly. They are both moving in different directions. Firefox pushes the nav buttons down and IE is pushing them up.

You're repeating IDs. I doubt that it's your problem, but if you're going to use it the way you are, use classes instead.

IDs are for unique elements.