Значки пользовательского интерфейса jQuery не отображаются правильно в таблице

Question

У меня серьезные проблемы с иконками пользовательского интерфейса jQuery, и я не вижу, что я делаю неправильно. Я использую пользовательский файл jQuery UI CSS, сгенерированный из Themeroller. Вот HTML-код, который я использую для иконок:

 <span class="expandDescription ui-state-default ui-icon ui-icon-zoomin"></span>

Это прекрасно работает, но когда я кладу это в таблицу, все идет наперекосяк, и я получаю то, что вы видите ниже:

Это в IE8. Это не работает намного лучше в Chrome, поэтому я считаю, что что-то не так. Вот фактический HTML-код для столбца:

    <td>

          <span class="expandDescription ui-state-default ui-icon ui-icon-zoomin"></span>
        </td>

Как я могу использовать иконки в таблице и заставить их правильно отображаться? Сумасшедшая вещь в том, что они работают в th, но не в td. Есть мысли?

Answer 1

Значки jQueryUI создаются с использованием определенных размеров и фоновой позиции спрайта.Любой CSS, который увеличивает размер контейнера значков, отбрасывает отображаемое изображение.

Проверьте конфликтующий CSS, который смещает положение фона, или добавьте дополнительный размер с помощью отступов.