Html/css table question

I’m trying to make a custom table with special border backgrounds.
my code is this:

<table cellspacing="0" border="0" cellpadding="0">
    <td width="26" height="52" align="right" va><img align="right" src="top1.png" width="19" height="51" /></td>
    <td width="105" height="52"><img src="top2.png" width="105" height="52" /></td>
    <td height="52" background="topmiddle.png">&nbsp;</td>
    <td width="87" height="52"><img src="top3.png" width="87" height="52" /></td>
    <td width="59" height="52"><img src="top4.png" width="60" height="52" /></td>
    <td height="215" width="26" valign="top"><img src="left1.png" width="26" height="215" /></td>
    <td colspan="3" rowspan="3" align="center" valign="top"><p>&nbsp;</p>
    <td height="215" valign="top"><img src="right1.png" width="60" height="215" /></td>
    <td  width="26" background="leftmiddle.png">&nbsp;</td>
    <td background="rightmiddle.png">&nbsp;</td>
    <td height="54" width="26" valign="bottom"><img src="left2.png" width="26" height="54" /></td>
    <td height="54" valign="bottom"><img src="right2.png" width="60" height="54" /></td>
    <td width="26" height="38"><img src="down1.png" width="26" height="38" /></td>
    <td height="38"><img src="down2.png" width="105" height="38" /></td>
    <td  height="38" background="downmiddle.png">&nbsp;</td>
    <td height="38"><img src="down3.png" width="87" height="37" /></td>
    <td height="38"><img src="down4.png" width="42" height="37" /></td>

The thing is: the middle square will have content, variable in height.
So I planned to make the left middle square and right middle square stretchable.
In Firefox, it works without a hitch but in other browsers the middle boxes don’t stretch.
I tried doing it in css, adding styles other html things but I can’t get it to work.

What can I do to fix this?

I’d have to see the images being used, but my first advice is… don’t use tables and IMG tags for PRESENTATION. I suspect that NONE of the images you are trying to use have ANY business in the HTML, and you are using easily ten times as much markup as should be needed.

Basically, if this was 1997 you’d be in the ballpark – this is 2011, yer doing it all wrong.

Is the technique I’d be looking at for that, but I’d have to see the images… it’s odd you’ve got five images top/bottom, again I’d have to see it to code it… but that you’re using 15 separate images for what could likely be handled with just one or two files is an indicator that you’re using decade out of date sitebuilding techniques.

Thanks for the input.
The reason why it’s so complicated is because this is what I would like to do:

it’s not just the corners and the middle but also other images.
When I make a box that’s large enough, than it’s no problem but when I create one that needs to be flexible towards the content, it is.

I did such things back in the day. (Even had a email template with something similar a while back.)

If I remember, I couldn’t get IE to render the repeating background either. I don’t remember what I did to resolve this tho. I do remember using 1x1px transparent images instead of nbsp for the cell that stretches.

Have you tried a style background url repeat-y on those stretchable cells?

yes, I tried that.
I’m currently just thinking about changing the layout a little so that I don’t have this problem.
So a top part and a bottom part without a background in the middle.
But that would be a convenience solution.


You wil most probably need to set the repeating background image to te complete table and then set the rest of the columns/rows to give the impression that the repeating section is isolated.

BUT this is a BAD IDEA! Use tables only for table based content not display purposes. It has many dowsides as rendering on mobile devices etc.