[css-d] lis and nested anchor tag background image problem

[Robert O'Rourke]

Hello,

    I'm creating a template that lists out product categories as a 
floated grid. The problem is i want each <li> to have a background-image 
of a picture frame and the nested <a> tag to have a background-image 
that sits underneath the frame. I've tried z-indexing with no luck but 
the only solution i've come across is to put the frame image on the <a> 
tag and the actual category image on the <li>.

    This isn't ideal but if no-one can think of a better way it isn't 
the end of the world.

    Here's the css:

        /* picture frames */

        #categories li {
          z-index: 10;
          float: left;
          width: 150px;
          height: 150px;
          margin: 0 10px 10px 0;
        }
        #categories li a {
          display: block;
          z-index: 5;
          width: 150px;
          height: 150px;
        }
        #categories li a:hover {
          width: 150px;
          height: 150px;
        }       

        .frame1 {
          background: url(pix/frames/frame1.gif) no-repeat;
          clear: left;
        }
        .frame2 {
          background: url(pix/frames/frame2.gif) no-repeat;
        }
        .frame3 {
          background: url(pix/frames/frame3.gif) no-repeat;
        }
        .frame4 {
          background: url(pix/frames/frame4.gif) no-repeat;
          clear: left;
        } /* etc... */

    And here's the html:

        <div id="categories">
          <ul class="clearfix">
            <li class="frame1"><a href="./"><span>Gilt Mirrors &amp; 
Lamps</span></a></li>
            <li class="frame2"><a href="./"><span>Oak &amp; Country 
Furniture</span></a></li>
            <li class="frame3"><a href="./"><span>Regency 
Collection</span></a></li>
            <li class="frame4"><a href="./"><span>Chateau 
Collection</span></a></li>
            <li class="frame5"><a href="./"><span>Fine English 
Furniture</span></a></li>
            <li class="frame6"><a href="./"><span>Fireplaces</span></a></li>
            <li class="frame7"><a href="./"><span>Leather 
Furniture</span></a></li>
            <li class="frame8"><a href="./"><span>Modern Design</span></a></li>
          </ul>
        </div>


    Fingers crossed anyway, cheers.

       Robert O'Rourke
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/