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 & Lamps</span></a></li> <li class="frame2"><a href="./"><span>Oak & 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/