Faded Borders - Tables or DIV ?

Question

I'm trying to use tables (or DIVs) to create a faded border around my contents. The contents can have its size adjusted via JS from 100px x 100px or higher and 100% x 100%, and of course I would like the borders to properly match up.

So far with tables I've had a tuff time using rowspan and so dropped it but now i have large gaps along the top horizontal and bottom horizontal (I want the contents to fit snuggly up against where the border fade starts and not have to see some open gap before the contents begins or after it ends). With exlcusive DIVs I cant even begin without FF or IE vomiting all over the place.

Here is my page: http://www.eyedef.net/help1/border.htm

Is it possible to have faded borders (PNG) viewable in FF and IE that can wrap around my contents which can be adjusted to various size within and yet have the borders properly match up?

More exactly, the contents is always set to 100% width/height and it is the outer container that has its size adjusted. I then expect the inner contents (ie. the image.jpg in my example) to auto-stretch.

Note: because Im trying to use PNG images, under IE i had to make use of the AlphaFilter to display the image. I am unable to use background-image under IE since it cant view PNG properly. And the AlphaFilter doesnt support repeating images. Form the URL you will see the table view with the various images used to create the border. Each area is unique and cant be repeated by a single image.

Answer 1

the trick to make an image border stretchable is to make the image a background image on table rows/columns on the borders. You will need to make sure the image is repeatable so that it looks right when you put copies of itself side by side. Then you just need to set it as a background like:

tr.topRow {
/*this is just an example for the top row*/
/*the td that uses this should look like */
background-image: url('topBorder.png');
background-repeat: repeat x;
}

td.leftColumn {
/*this is just an example for the left side*/
/*the td that uses this should look like */
background-image: url('leftBorder.png');
background-repeat: repeat y;
}