Very Hard: Displaying only a Portion of Overflow Options

[LastSasquatch]

Is it at all possible to allow overflow from just a small area of a table cell, but clip everything else. I'll give you a run-down of my problem.

I have a small table of 2x2, with the right two cells merged. So theres a top left cell, a bottom left cell, and a right cell. I have content in the right cell in the form of text. The cell has the following formatting:

overflow: hidden;

and the text has the following formatting:

position: relative;
left: -91px;
vertical-align: top;
text-align: justify;

The left cells are 182px wide, so, because the text is moved left 91px, it looks like it is centered with respect to the entire table, with the overflow into the left two cells being cut off.

The problem now is, I only want the text covered by the top left cell to be cut, and I want the text overflowing in the bottom left cell to still be visible. I tried using the 'clip:' property, but you cannot specify a non-rectangular area, and the area i want to display is kind of like a 3 part corner-piece, so it's of no help to me.

There is an image in the top left cell, and nothing in the bottom left cell if that's of any help. Does anyone have any idea how to go about solving this problem. It's the last thing I need to do to finish the layout of my web page, and I've been asking around everywhere but no one has a clue. Even if you aren't totally sure, please post and brainstorm with me; I'm sure with enough people we can figure this, or some alternative, out. If you know exactly how to do this that's all the better, so please post.

[pandy]

The answer is likely "no", but to be honest I was lost before I had read half of that. Can you link to a page that shows what you've got so far?

[LastSasquatch]

I can't sorry, it's not online until it's finished.

[Christian J]

I probably didn't understand either. Do you want the text to look something like this:

CODE

   bar
   bar
   bar
foobar
foobar
foobar

...and in addition be scrollable?

You can't do that with tables, but if you position an opaque element in front of the top left corner of the scrollable box it should work like that.

[LastSasquatch]

Yes! Thank you that's a great way to show what I mean. Except its not scrollable, its just static text that is partly covered. Like:

CODE

   456
   456
   456
123456
123456
123456

The only problem is, how do you force something to be opaque? By default the text is appearing over the top of the image in the top left. I thought "opacity = 1;" was the default setting, and even if it isn't, I added that to the image in the top left and it didn't do anything.

[pandy]

A positioned box is automatically layered on top of static boxes. You can use z-index, but you may have to also position the image.

[LastSasquatch]

Yes it works. I set the images position to relative, but left the margins the same so that it didn't move but I could bring it to the front. Then I set its z-index to 1, so it appears above the text.

Thanks heaps guys.