Cần giúp đỡ về css image sprite

[ducnh]

Hix, do mới bắt đầu học css nên có nhiều thứ mình còn mù mờ. Nhờ các bro giúp mình xử lý cái vụ này với.
Cụ thể, mình đang thiết kế một toolbar gồm nhiều button từ table, mà mỗi button ứng với 1 thẻ <td>
Mình có phần ảnh nền cho những button đó, nhưng thật ra gồm 2 sprite theo chiều đứng (32x64). Mình muốn cắt chúng ra, ở một trạng thái xác định thì chỉ dùng 1 sprite thôi (32x32). Mình có tìm hiểu qua và biết đó là kỹ thuật image sprite trong css, có đọc qua bên w3school nhưng mà làm theo không được.
Trích code của mình
HTML

<table id='icon-toolbar'>
<tbody>
<tr>
	<td id='publish-button' class='button'>Publish</td>
	<td id='unpublish-button' class='button'>Unpublish</td>
	<td id='move-button' class='button'>Move</td>
	<td id='copy-button' class='button'>Copy</td>
	<td id='trash-button' class='button'>Trash</td>
	<td id='edit-button' class='button'>Edit</td>
	<td id='new-button' class='button'>New</td>
	<td id='params-button' class='button'>Parameters</td>
	<td id='help-button' class='button'>Help</td>
</tr>
</tbody>
</table>

css

table#icon-toolbar{
	background-color: #fbfbfb;
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	border-color: #cdcdcd;
	height: 64px
}
table#icon-toolbar td{
	font-family:Arial;	
	color:#6855c4;	
	margin: 5px auto	
}
.button{
	font-size:11px;
	vertical-align:bottom;
	text-align:center;
	border-top:1px solid #fbfbfb;
}
.button:hover{
	border-top:1px solid #eeeeee;
	border-left: 1px solid #eeeeee;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}
#publish-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-publish.png) no-repeat;
	background-position: 0px 0px;
}
#unpublish-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-unpublish.png) no-repeat;
	background-position: 0px 0px;
}
#copy-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-copy.png) no-repeat;
	background-position: 0px 0px;
}
#move-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-move.png) no-repeat;
	background-position: 0px 0px;
}
#new-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-new.png) no-repeat;
	background-position: 0px 0px;
}
#edit-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-edit.png) no-repeat;
	background-position: 0px 0px;
}
#params-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-config.png) no-repeat;
	background-position: 0px 0px;
}
#trash-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-trash.png) no-repeat;
	background-position: 0px 0px;
}
#help-button{
	width:32px;
	height:32px;
	background:url(../images/icon-32-help.png) no-repeat;
	background-position: 0px 0px;
}

Mình cũng ko hiểu vì sao mà nó ko cắt đươc sprite, ai chỉ giúp mình với. Đây là hình chụp sau khi chạy file view lên

[08520091]

Bạn có thể zip lại rồi thảy lên đây, mọi người sẽ giúp bạn dễ hơn.

[08520522]

Trong table thì các thành phần như <table>, <tr> và <td> là nó có liên quan với nhau về mặt kích thước. Ở đây mình thấy bạn để độ cao của <table> là 64 cho nên nó hiển thị luôn cả phần ảnh phía dưới (nghĩa là việc thiết lập height của td là không có tác dụng).
Cách giải quyết là bạn tạo bảng gồm 2 dòng, dòng đầu chứa hình ảnh (độ cao của <tr> thiết lập là 32), dòng thứ 2 chứa chữ

[07520182]

Cũng không hiểu bạn định làm gì nếu dùng image sprite kiểu này thì khi hover sẽ kéo nó xuống cái sprite ở dưới, nhưng bạn thì không kéo mà chỉ quất thêm cái border nên cần gì dùng sprite nhỉ???
Với lại, cái table cao 64px mà td bên trong cao 32px thì nó lấy chiều cao theo table nên sẽ lòi cả 2 sprite ra fix số 64 thành 32 là xong.