IE7 css проблема?

Question

У меня проблема с отображением следующей страницы в IE7.

http://townappliance.arosavd.com/index.php/barbeques/natural-gas.html

У каждого продукта есть:

<div> для верхней части с фономобраз.<li> для середины с фоновым изображением.<div> для нижнего края с фоновым изображением.

У <li> есть повторение фона: repeat-y; и, похоже, он не останавливается в нужном месте.Если у вас нет IE7, скопируйте ссылку выше и используйте эту страницу, чтобы увидеть ее:

http://ipinfo.info/netrenderer/index.php

заранее спасибо,Песах

Answer 1

Вы можете изменить свои div'ы внутри ul на li.

<ul>
    <li class="top"></li>
    <li> item here </li>
    <li class="bottom"></li>
</ul>

или рассмотреть возможность перемещения ваших div'ов из ul.

Answer 2

Ваша разметка недействительна, и IE7 реорганизует ее, возможно, другие браузеры лучше ее "подгоняют".

<ol>
    <div /><!-- top -->
    <li />
    <div /><!-- bottom -->
</ol>

Переформатируется как:

<ol>
    <li>
        <div /><!-- top -->
        <div /><!-- bottom -->
    </li>
</ol>

Выпридется переставлять HTML;только LI может быть дочерним элементом OL, а не DIV (или SPAN или H2, которые также являются прямыми потомками OL).

Я бы рекомендовал изменить UL и LI на DIV (сохраняя идентификаторы и классы одинаковыми).Таким образом, разметка больше не является недействительной.Элементы списка здесь на самом деле не нужны, так как каждый элемент в списке довольно большой, и на уровне блока.Также это будет быстрее, чем реорганизация списка, чтобы он действовал (что также потребует значительных обновлений CSS)

Надеюсь, это поможет!