Динамическое деление ширины с градиентным фоном - IE8 и IE7 - PullRequest
Новая
       10

Динамическое деление ширины с градиентным фоном - IE8 и IE7

0 голосов
/ 28 мая 2010

Я пытаюсь создать следующее.

альтернативный текст http://www.freeimagehosting.net/uploads/a972d988f8.jpg

Проблема в том, что материал в строке 1 имеет другой градиентный фон, чем материал в строке 2.

Кроме того, row1 динамически заполняется данными из базы данных, поэтому может содержать 2 элемента или 6.

Так что я хочу, чтобы градиент от row2 продолжал повторять, чтобы он соответствовал ширине от его родного брата. Я не могу установить градиент на контейнере, так как у каждого есть различный градиент фонового изображения.

Проблема заключается в IE8 и 7, поскольку они повторяют градиент только для ширины строки 2, поэтому, если строка 1 короче или шире, будет пробел. 

 <div id="content">
     <ul class="product-list">
         <li class="product-thumb"> 
             <a href="#" class="product-image"><img src="" /></a>
                 <h3> <a href=""> prod1</a></h3>
          </li>
          <li class="product-thumb"> 
              <a href="#" class="product-image"><img src="" /></a>
              <h3> <a href=""> prod2</a></h3>
          </li>
      </ul>
      <ul class="footer-menu">
          <div class="footer-container">
              <li><a href="#">Link1</a> </li>
              <li><a href="#" >link2</a></li>
              <li>info</li>
              <div class="footer-middle-background"></div>                 
          </div>
      </ul>
 </div>

1 Ответ

0 голосов
/ 28 мая 2010

Вы не можете использовать div как этот в ul.

Если вы переместите div из ul, он автоматически будет иметь ширину 100% (если вы не указали что-то еще где-то еще ...). 

  <div class="footer-container">
    <div class="footer-middle-background">
      <ul class="footer-menu">
          <li><a href="#">Link1</a> </li>
          <li><a href="#" >link2</a></li>
          <li>info</li>
      </ul>
    </div> 
  </div>
...