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

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">
                <a href="page.html" alt="Description" class="button active left">The Challenge</a>
                <a href="page.html" alt="Description" class="button">The Solution</a>
                <a href="page.html" alt="Description" class="button right">Our Expertise</a>
            </div><!-- end .buttons -->

            <div class="pagination">
                <a href="blog.html" class="prev" alt="previous">&nbsp;</a> 
                <a href="blog.html" alt="1">1</开发者_StackOverflow社区a> 
                <a href="blog.html" alt="2" class="active">2</a>
                <a href="blog.html" alt="3">3</a>
                <a href="blog.html" alt="4">4</a>
                <a href="blog.html" alt="5">5</a>
                <a href="blog.html" class="next" alt="next">&nbsp;</a>
            </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;
}

---

@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;
}