Center Image Collapses when floated; Prev / Nxt Arrows Also Collapsing - css

Question

I'm having a problem with my center button (image) collapsing on itself; it is not showing the image (width: 200px) in all of it's glory. Also, for some reason, my previous and next arrows are not showing up properly either (only 2px by 20px, as opposed to the full image). I'd truly appreciate any insight because I've been battling with this for a few hours now; I'm sure it's human error because it happens in "The Big 4" (IE, Chrome, FF and Opera). Also, I attached an image to help clearly illustrate the issue...
My HTML is as follows:
<div class="excerpt">
...
<div class="buttons">
The Challenge
The Solution
Our Expertise
</div><!-- end .buttons -->
<div class="pagination">
1
2
3
4
5
</div><!-- end .pagination -->
</div><!-- end #rotator -->
The CSS for the above is as follows:
#rotator .excerpt {
float: left;
width: 320px;
margin: 0 0 0 40px;
}
#rotator .buttons {
text-align: center;
font-size: 20px;
clear: both;
padding-top: 15px;
width: 100%;
}
#rotator .button {
width: 200px;
height: 40px;
background-image: url(images/btn.gif);
background-repeat: no-repeat;
padding: 3px 0 0 0;
text-indent: -20px;
}
#rotator .button.active {
background-image: url(images/active-btn.gif);
background-repeat: no-repeat;
}
#rotator .button.right {
margin-right: -5px;
}
#rotator .pagination {
clear: both;
text-align: center;
font-size: 1.2em;
font-weight: bold;
padding-top: 10px;
width: 100%;
}
#rotator .pagination a.prev {
height: 30px;
width: 30px;
text-indent: -9999px;
background-image: url(images/page-left.png);
background-repeat: no-repeat;
margin-right: 10px;
}
#rotator .pagination a.next {
height: 30px;
width: 30px;
text-indent: -9999px;
background-image: url(images/page-right.png);
background-repeat: no-repeat;
margin-left: 10px;
}

Answer 1

#joe; a in an inline tag not a block tag & inline tag is not take any height, width & vertical margin & padding. So, define display:block in your prev & next anchor button.
CSS:
#rotator .pagination a.prev,
#rotator .pagination a.next{
display:block;
}