Expandable Box Drop Shadow?

Hi all

I’m trying to find the best way to recreate the box like the one in the top of this image - http://www.ttmt.org.uk/box/

It’s a nav box with a slight shadow on the right and bottom, I’m not asking about styling the text or position but the drop shadow. I don’t want to use CCS3 and I don’t want to have a box with a background image the size of the box.

I tried to use a method from deathshadow60 I found posted - http://www.sitepoint.com/forums/showthread.php?t=695764

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<style type="text/css" media="screen">
	 /* null margins and padding to give good cross-browser baseline */
   table,tr,td,th,p,img {

   img,fieldset {

   body {
   	font:normal 85%/140% arial,helvetica,sans-serif;


   .borderBottom {
   	font-size:1px; /* prevent IE height bug */
   	background:url(images/borders1.png) bottom left no-repeat;

   .borderTop {
   	background-position:top left;

   .borderTop div,
   .borderBottom div {
   	background:url(images/borders1.png) bottom right no-repeat;

   .borderTop div {
   	background-position:top right;

   .borderSides {
   	overflow:hidden; /* wrap floats */
   	height:1%; /* trip haslayout, wrap floats IE */
    1border:solid #d6d4d4;
   	1border-width:0 1px;
   .borderSides ul{
   .borderSides ul li{
     padding:5px 2px;

  <div class="box">
    <div class="borderTop">
    <div class="borderSides">

    </div><!-- .borderSides -->
    <div class="borderBottom">
  </div><!-- .box -->

I used one image like the bottom image here - http://www.ttmt.org.uk/box/

as background images in div’s and placed at the corners.

This works too a point but I can’t use this method to get the drop shadow on the right edge - http://www.ttmt.org.uk/box/example/

The box will also be on a textured background as shown in the top image here - http://www.ttmt.org.uk/box/

It tried to use a png image with transparent sides but this shows the image below - http://www.ttmt.org.uk/box/example1/

So what is the best way to have an expandable box with drop shadow?

Is it possible to have it with a textured background below ?


You can do the old brute force nested div approach and use three images as follows.


One image for the bottom, [URL=“http://www.pmob.co.uk/temp/images/dsside.png”]one image for the sides and [URL=“http://www.pmob.co.uk/temp/images/dscorner.png”]one image for the rounded corner. The images weigh in at under 3k for the lot and can make boxes up to 2650 x 5000px.

They are transparent pngs so IE6 won’t play ball but allows you to place them on gradient backgrounds as required.

If you want transparent shadows all around you can use this two image method for a fully fluid layout as shown here.


Or a one image method.

try this in css

border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: #666 5px 5px 5px;-moz-box-shadow: #666 5px 5px 5px;box-shadow: #666 5px 5px 5px;background: #EEFF99;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));background: -moz-linear-gradient(#EEFF99, #66EE33);background: linear-gradient(#EEFF99, #66EE33);-pie-background: linear-gradient(#EEFF99, #66EE33);behavior: url(/some_pic.gif);

Thanks for the reply but i didn’t want to use CSS3