Отображать элементы списка рядом друг с другом поверх других элементов IE7

Question

Обновление:

JSFiddle:

http://jsfiddle.net/pcRKv/1/

Я прочитал тонну постов и статей, обсуждающих z-индексацию в IE7, но я просто не могу найти решение своей проблемы.

У меня есть вращающийся баннер, который использует jQuery и CSS для перехода к следующему изображению баннера в списке. Я использую z-index, чтобы последний баннер перешел в следующий баннер. Я создал структуру HTML, чтобы легко разбить без CSS. Я бы хотел, чтобы .banner_thumb сидел поверх всех элементов баннера и плавал рядом друг с другом. Оказывается, он работает во всех других браузерах, но в IE7- ... в IE7 большие пальцы сидят друг над другом, а не плавают рядом друг с другом. Есть идеи, как это исправить?

Вот мой css: http://pastebin.com/32GxamMg

HTML:

<div class="span-25 last" id="banner">
        <h2>University Features</h2>
        <ul>
           <li class="selected">
              <div class="banner_description">
                  <h3>xxxx</h3>
                  <p>body</p>
              </div>
              <img class="banner_img" src="" />
              <img class="banner_thumb" src="" />
           </li>
           <li>
           ...
           </li>
           <li>
           ...
           </li>
           <li> 
           ... 
          </li> 
       </ul>
 </div>