Центр изображения разрушается при перемещении; Prev / Nxt Стрелы также сворачиваются

Question

У меня проблема с тем, что моя центральная кнопка (изображение) свалилась на себя;он не показывает изображение (ширина: 200 пикселей) во всей своей красе.Кроме того, по какой-то причине мои предыдущие и следующие стрелки также не отображаются должным образом (только 2 на 20 пикселей, в отличие от полного изображения).Я действительно ценю любую проницательность, потому что я боролся с этим уже несколько часов;Я уверен, что это человеческая ошибка, потому что это происходит в «Большой четверке» (IE, Chrome, FF и Opera).Кроме того, я приложил изображение, чтобы помочь наглядно проиллюстрировать проблему ...

Мой HTML-код выглядит следующим образом:

          <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</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 -->

Ниже приведен код CSS:

#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

@ Джо;a в inline tag, а не в block tag & встроенном теге, не принимает никакой высоты, ширины, вертикального поля и отступов.Итак, определите display:block в вашей prev & next кнопке привязки.

CSS:

#rotator .pagination a.prev,
#rotator .pagination a.next{
display:block;
}