background property

[nuxy]

Hello there,

 

I'm currently creating a page, that is using mainly CSS2.

I'll explain what I want to do,

 

The desigh has two pictures at either sides of it, left and right.

The main table, that is in the middle is has the width of 70 percent, and then the other two sides has 15 percent each.

 

My current layout uses a table, as this example.

table -> tr -> td <> td <- td <> td -> td <> td <- tr <- table

I'm usingthe background property to lay an image, that is bassically transparent with an shaddow effect for the main table.

So far everything has gone well, but now, the background images seems to be under the actual image.

This really kind of cufuzes me.

There is also the matter of the one background image(left) does not want to align prroperly(0% 100%/top right).

here is an image of it.

 

Here is the code, it is in php, for certain purposes.

<?php
function header_a1() { 
?>
<style type="text/css">
body {
  background-color: #FFFFFF;
  color: #333333;
  margin: 0px 0px 0px 0px;
}
td.main_bdy {
  background-color: #e6e6e6;
  vertical-align: top;
  text-align: left;
  padding: 10px;
  font-family: tahoma;
  font-size: 11px;
  font-color: #333;
}
table {
  border-spacing: 0px;
}
td {
  padding: 0px;
}
td.sld_l {
  background-image: url('images/sld_l.png');
  bacground-position: 0% 100%;
  background-repeat: repeat-y;
  width: 15%;
  text-align: right;
  vertical-align: top;
}
td.sld_r {
  background-image: url('images/sld_r.png');
  bacground-position: 0% 0%;
  background-repeat: repeat-y;
  width: 15%;
  text-align: left;
  vertical-align: top;
}
</style>
<table style="width: 100%;height: 100%">
<tr>
<td class="sld_l">
<img src="">
</td>
<td style="width: 70%" class="main_bdy">
<?php
return 0; 
}

function ending_a1() { 
echo '</td>
<td class="sld_r">
<img src="">
</td>
</tr>
</table>';
return 0; 
}

 

What can I do to correct this?

Thanks.

[duclet]

Do you mind posting the link to the page? It will be easier to test and fix.

[SuperBlue]

The reason you aint getting any help, is you post walls of code, mixed with PHP. It takes quite some time to debug. You could atleast have avoided posting the PHP, if the php is the source, create a test case where you aint using php. That way it should be easier to track the problem.

 

 

If you want to posistion background images, on each side of a column. You should use CSS posistion on either 2 images, or use 2 divs containing the background image's. Since multiple backgrounds aint supported by browsers yet. You ofcause need to apply "posistion:relative;" to the table, and place the images inside that with "posistion:absolute;".

Or even better, ditch the table and create a Basement div. 

 

For instance it would have been easier using CSS3 for this, but it wouldent work in the browsers we have now. Using two divs is perfectly acceptable, but seeing you use tables, whats the point.