Table layout, alpha-PNGs, flexible cell heights in Opera/IE?


I am making a new website using a table layout. My first question regards to an alternative: is this possible with pure CSS? And the second more important question refers to a visual problem of the current layout with Opera and IE, but not with Firefox.

URL to the test page

The problem also is explained by comment tags in the HTML code.
This page is XHTML1.0 Strict valide.[/INDENT]

Justification of using a table layout

[INDENT]I am using a table layout again after many years of layouting with CSS, because i have no idea how to get similar results with CSS in this case.
Many CSS layouts use multiple overlapping divs with different background images to visualise corners and edges. But due to the fact that I am using transparency in PNG images, it is no longer a good idea to overlap them. The divs now have to be clearly separated next to each other. Moreover, most layouts are of fixed width. I am using a flexible layout, so repeating background images are needed between the corners.[/INDENT]

Question 1

Has anybody an idea of how to get similar results with a pure CSS layout?

The ultimate problem

[INDENT]This layout works fine for me in Firefox, but not in Opera and IE.
The displayed sheet of paper should have shaded borders. Therefore the layout consists of 5 columns and 5 rows, where the real content is located in the middle of the table with rowspan=3 and colspan=3. This cell is growing with height and width.
To display the corners, I am using the (4 times) 3 corner cells, each having a background image width fixed height and width. Conclusion: The border cells located in the horizontal and vertical middle make the whole thing flexible, using flexible width/height. And this is the crux of the matter: Opera and IE do not obey the height values of the vertical border cells.[/INDENT]

Question 2:

Why Firefox shows the whole thing properly, while Opera and IE do not allow the middle cells to automatically fill the remaining height. In these browsers, the vertical border cells become cells of arbitrary heights, even the cells that actually should have fixed heights. That’s why the shaded borders on the left and right of the page seem to vanish with these browsers.

I hope you can help me :frowning:

Sman, welcome to the forums! You’ve started with a heck of a good question, and one that’s a bit past my skill set. :slight_smile: However, I’m watching this thread because I want to see what the answer is as well. I design in Opera, and because I’m persnickety, I won’t create a design that won’t work in that browser. I’d like to see how this plays out.

Edit: just for the record, I don’t see any difference in the display between current versions of Opera, Firefox, and Chrome. (I don’t have a current version of IE.) Have you upgraded your version of Opera lately? (Or I could just be blind and not notice the differences…)

thank you for your post. I am using Opera 10.53 and Firefox 3.63 on Windows. The difference that I can see ono Opera is located in the table cells at the borders (10px width) on the left and right sides of the sheet of paper. The shading images there are ok starting from the top of the page, but vanishing in the middle down to the bottom of the page. To be exact: cell colum 1 row 4 is much larger than it should be, so the background image of a fixed size stops repeating on its top, concluding to no image for the rest of the cell down to the bottom. Or do you see any shadows there? It would be surprising for me :smiley:

Just to be sure: The 5 cells of the first column should have the heights: 10px, 149px, auto, 128px, 10px. Is this the case in your browser?

Your eyes are apparently better than mine. You are correct. Subtle differences, but important!


Someone in another forum posted a hot tipp:

It took me a while to understand how it works and to implement it on my layout. I needed 23 divs for all that. I don’t present a corner by one image, I am using 4 images instead: 3 thin border-images of PNG format with alpha channel and 1 big jpg image without transparency. The total amount of file size is much lower than a single PNG image for each corner. This works in Opera and IE !! :smiley:

URL of the solution:

The next problem

[INDENT]But another question is: is it possible to reduce the amount of background-images (so much http-requests :frowning: )
I played a little with big images containing a bunch of images, which are separated by background-positions. This works okay, but i can not really apply this method to my layout. The divs are all bigger than their background-images (which still should not repeat). And by the way: does anybody know how to give background-images an negative or positive offset when they are positioned at right or bottom? I am looking for something like 100%+20px …[/INDENT]