View Full Version : Shadowing a table
alsoszaa
25 Mar 2008, 10:01 PM
How do you shadow a table just on the sides. I have tried creating a Fireworks PNG to use as the background of the side colums of my table. this somewhat worked. However, the problem is when the image repeats itself, there is a 1px space in between looking very unprofessional. I want my shadows to look like this example. I can use CSS but need help with the code. please follow this link and look at the left and right sides of this page. http://www.csszengarden.com/?cssfile=/207/207.css&page=0
Wickham
26 Mar 2008, 03:38 AM
You should be able to use background-images with repeat-y in a left and right table cell.
If cell-spacing is 0 then there should be no space but if you have a positive size then there will be a space between the shadow and the center content so you need to set the cells with the background-image to 0 margin and padding:-
I've just tested this with shadow images for left and right sides 17px wide x 13px high and they repeat down the sides. Only the center cell had cellpadding for the text.
<table cellspacing="0" cellpadding="10" bgcolor="skyblue"><tr>
<td style="margin: 0; padding: 0; background:
url(images/main_left.jpg) repeat-y; width: 17px;"></td>
<td>
Main center content cell<br/>
Main center content cell<br/>
Main center content cell<br/>
Main center content cell
</td>
<td style="margin: 0; padding: 0; background:
url(images/main_right.jpg) repeat-y; width: 17px;"></td>
</tr></table>
or put the styles in classes in a stylesheet.
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.