Drop shadow on a div container?

Question

I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.

I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!

Answer 1

You can do it at the moment with Safari using CSS.

Or alternatively, create a div behind your auto suggest, drop it down to the bottom right (absolute positioning) and give it a shadowy background. Use z-index to get your auto suggest on top of it.

To clarify from the comments, here is some sample CSS

.auto-suggest {
display: block;
width: 200px;
height: 100px;
position: relative;
}

.shadow { /* child of auto-suggest */
display: block;
width: 200px;
height: 100px;
position: absolute;
bottom: -10px;
right: -10px;
background: url(images/shadow.png) no-repeat;
}

Mike, if you can't have a fixed height, you could use JavaScript to calculate the values. jQuery would be a handy library here, and if you're using auto complete, I have a feeling you'll be leveraging a library anyway.

Answer 2

The most widely compatible way of doing this is likely going to be creating a second div under your auto-suggest box the same size as the box itself, nudged a few pixels down and to the right. You can use JS to create and position it, which shouldn't be terribly difficult if you're using a fairly modern framework.

Answer 3

You can try using the PNG drop shadows. IE6 doesn't support it, however it will degrade nicely.

http://www.positioniseverything.net/articles/dropshadows.html

Answer 4

Hi, you might want to try this. Seems to be pretty easy and works on IE6 and Moz atleast.

<div id ="show" style="background-color:Silver;width:100px;height:100px;visibility:visible;border-bottom:outset 1px black;border-right:outset 1px black;" ></div>

The general syntax is : border-[postion]:[border-style] [border-width] [border-color] | inherit

The list of available [border-style]s are : dashed dotted double groove hidden inset none outset ridge solid inherit

P.S: Wanted to show the demo , here. Is there a way to paste in html code in here and get it rendered as it would in a browser ?

Answer 5

I have created my own solution with four lines of jquery code:

http://sarfraznawaz.wordpress.com/2010/03/16/drop-shadow-effect-with-four-lines-of-jquery-code/