View Full Version : Fuzzy shadow with table

Feb 1st, 2007, 09:06 AM
I am looking how to do the CSS for a "fuzzy shadow" for a table with more rows/colomns.. I know how to do the fuzzy shadow with an image, but just cannot let it work with a table.. :confused:

Feb 1st, 2007, 10:35 AM
Any chance of a jpeg of the sort of thing you're trying to achieve? Bit difficult without any visual reference...

Feb 1st, 2007, 10:51 AM
Hi, sorry: here is the dropshadow-script I used for the images

And it looks like that: http://www.dedaadcom.nl/fuzzy_shadow/dropshadow.html But how can I do a dropshadow for a whole table (and not the images in the table..)

I am just learning CSS..:o

Feb 1st, 2007, 12:47 PM
It's not ideal, but using your bits of code this works... up to a point

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.img-shadow {
background: url(img/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;

.img-shadow table {
background: url(img/shadowAlpha.png) no-repeat left top !important;
background: url(img/shadow.gif) no-repeat left top;
padding: 0px 5px 5px 0px;

table {

td {


<div class="img-shadow">
<td><img src="bridge.jpg" alt="test" width="311" height="311"/></td>

Adding in border-collapse:collapse; to the table makes the shadow disappear.

If you're just starting CSS design, you might want to rethink using tables. CSS design is a different approach from a table based layout. The idea with CSS is that you start with text and images that flow in a logical order; use HTML to give it structure using headings, lists, paragraphs etc (and start to address issues of accessibility through alt tags for images, abbr and acronym tags for abbreviations etc); group sections together using divs; and then use CSS to pull it into the design you want to achieve.

I always recommend Sitepoint books, as I think they provide a really good introduction to design using CSS. There's Build Your Own Web Site The Right Way Using HTML & CSS (http://www.sitepoint.com/books/html1/) and HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css2/) which would make very good starting points.

Feb 1st, 2007, 01:14 PM
Thanks! It worked. I will buy the books..