Search code examples
csshtmlinternet-explorer-8internet-explorer-7

Dynamic Width Divs with gradient background - IE8 & IE7

I'm trying to create the following.

alt text

The problem is that the stuff in row1 has a different gradient background than the stuff in row2.

Also row1 is dynamically filled with stuff from the database, so it could have 2 items or 6.

So I want the gradient from row2 to keep repeating it's to match the width from it's sibling. I can't set the gradient on the container since each has a diferent background image gradient.

The problem lies in with IE8 and 7 since they only repeat the gradient for row2 width, so if row 1 is shorter or wider there will be a white space gap. 

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

  • You cannot use a div like that in a ul.

    If you move the div out of the ul it will automatically be 100% wide (unless you specified something else somewhere else...).

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