Results 1 to 2 of 2

Thread: Shadowing a table

  1. #1
    Join Date
    Mar 2008
    Posts
    1

    Shadowing a table

    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.css&page=0

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    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.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •