template help

[niccol]

OK. Well the answer might be to put the bottom left corner into the <td> and the top left corner into the div. So #centerBackground is the one that needs to have the bottom left corner.

Basically, the <td> will be full height but the div inside it might not be.

[gjh42]

Since you have a fixed-width #mainWrapper at 900px wide, you can know exactly how wide the center column will be.
Thus, you can make one bg with the entire top(TL & TR rounded corners) and another with the entire middle and bottom (BL & BR rounded corners). If you want a border, make the second gif taller than you will ever have a page so there will always be side borders.

Assign the bottom gif to the <td>, positioned at the bottom center, and the top gif to the first <div>, positioned at top center. This will always fill the column from top to bottom.

There is an alternate version of this method using three gifs, including one for the middle bg and side borders that repeats vertically so none of the gifs needs to be tall. That would not work so well for the "keep it full height" requirement.

[niccol]

Judging by the the original design there are no TR and BR rounded corners.

[gjh42]

OK, then make those corners of the gifs square:) The principle and the advice remains the same.

[gjh42]

If the desire is for a solid color column with just rounded corners at TL and BL, then make the td background-color as desired, and put the small corner gifs, BL in the td positioned bottom left, and TL in the div positioned top left. As you described but making sure the td has the bg color.

[niccol]

Well, actually it is better to use the 'corners only', rather than 'top and bottom gifs', for a couple of reasons. Firstly, they are smaller files. Secondly, if the page is text-size zoomed then it doesn't break the layout. (Part of accessibility guidelines)

The disadvantage is, of course, that you rapidly create a whole number of nested divs if you apply effects to four corners. Have a look at a Template_Monster template to see how this can look! However, adding one more div here really is not an issue.

So, I stick with my original advice. Put the BL corner in the <td>. Put the TL corner in a nested <div>. If the <td> has a background image other than the corner put that in a nested <div>.

Finally, there is going to come a point when designers really start using curved corners as specified in css3. Most modern browsers will render them fine and it saves all this messing around. Also, they degrade pretty nicely if the browser doesn't render them - in that you are just left with square corners for those users viewing your site on IE6. I am not suggesting that we are at that point yet but I can't wait to have to stop this messing around with nested elements.

[gjh42]

We are in agreement about the corner gifs. The nested div will only work if the center content is at least as tall as the sidebar.
And yes, it would be so nice to be able to leave the nested divs behind...
By the way, the original stylesheet puts the top image in the pre-existing div:

.centerColumn {
	background-image: URL(../images/MenuRightHeader.gif);
	background-repeat: no-repeat;
	padding-top:10px;
}

so no need to add a new nested div.