Although I know using tables for positioning is not ideal, I have partitioned the page into 3 vertical pieces and further divided the middle section into 3 horizontal parts. Despite the fixed sizes of the left and right sections, they can change, leading to column height discrepancies. To make matters more complex, I want the middle section to resize dynamically to fill available space. Traditional solutions like relative/absolute positioning or static repeating images are not viable options in this scenario. Therefore, I am resorting to using tables. However, I am encountering an issue where a gradient in the top piece is not displaying properly. Why could this be happening?
To see the problem in action, visit the following JsFiddle link: http://jsfiddle.net/juckh/1/