bordering a table with an image

Hi all
I am trying to use an image to create a border to a table that is placed inside a div
the html code looks something like that:

<div id="Torso">
  <div id="topTableBorder"></div>
  <div id="leftTableBorder"></div>
    	<table class="mainDataTable" id="mainTable">
    	<!-- TABLE HEADER -->
    	
    	<tr>......

Code (markup):

I am using the css for the table and the borders:

#topTableBorder
{
	background-image: url('images/outerTable_tops.jpg') ;
	background-repeat:repeat-x;
	border:none;
	height:15px;
	width:80%;
	margin-left:18px;
	position:relative;
}
#leftTableBorder
{
	background-image: url('images/outerTable_lefts.jpg') ;
	background-repeat:repeat-y;
	width:18px;
	height:80%;
	border:none;
	float:left;
}

.mainDataTable
{
	border-collapse: collapse;
	margin:0px;
}

Code (markup):

The border is then departed fro the table and not in the right size on ie. the firefox handles it a bit better but still this is no solution.

I have tried using the border-image property - but it failed to work probably because the browsers don't support all the css3 features or I might have written it wrong - I can't find good tutorials for that feature.

I must add that the table is totally dynamic so I can't use the normal pixel-size width and height attributes

Thanks a lot for your help
Danny

 

You want two image borders, not four? You might have better luck with 2 div wrappers:

<div1>
<div2>
<table/>
</div2>
</div1>

with div1 having top padding and the "top" background image, and the div2 having left padding and background image...

Even if the table isn't static, you can give it some sort of width restriction? If you can't set an em or other flexible width on the div1 and then make the table width: 100% (so the table is always hugged by the div) then you could maybe get away with floating the div1 with width: auto (floats shrink-wrap to their content) though that would need good testing cross-browser (as they'd rather have widths on floats, from back in the days when that used to be required, CSS1).

I notice you're setting a height of 15 px on those divs holding the images. Surely your table is taller than 15px??

 

Thank you Mr Poes
I posted the code using only 2 borders because that didn't work and I didn't continue but I yes - I need 4 borders.
In that case your solution will include 4 cascading divs?

The height is the height of the border-top image, The width is the width of the border-left image.
Why pad?
Danny

 

I'm padding because instead of loose divs that open and close ahead of the table code like you posted, I'm give giving the table several div wrappers (they go all the way around the table). With top padding, the table (a child) gets pushed down as far as needed to show the wrapping div's background image. With left padding, the table is pushed away from the left edge to reveal that div's background image. Think of padding as fat in people. If you increase the layer of fat between the skin and the organs, the organs are further away from the skin. If you set a width on a block (instead of not mentioning the width and letting it try to stay 100% wide) then adding padding adds to the total width, just like adding fat to a person sitting in the chair will make their sides expand until their skin is touching both armrests. So if you set any widths make sure the math adds up:
div width="200px" padding="0 15px" means the div's total width isn't 200px but 230px.


So, four borders, pseudocode:
<div1>
<div2>
<div3>
<div4>
<table/>
</div4>
</div3>
</div2>
</div1>

normally I'd try to use the table itself to hold one of the backgrounds but some browsers have issues with background images on tables or table-rows.

If there was any possibility of having the width being fixed then you could remove one of the wrapping divs and have one of the divs hold both the left and right sides (one large background image and sidepadding both sides). This image could also still be repeated-y like any other.

You could also have one of the divs have a child after the table who is a block and holds the bottom background, instead of a wrapper:
<div1>
<div2>
<div3> div3 has two children, the table and another sandbag)
<table/>
<divinner>holds a background</divinner>
</div3>
</div2>
</div1>

It's rather ugly code but the only way I can think of that will work cross-browser at the moment.