Posted by Ben C on 11/14/06 18:22

On 2006-11-14, Susanne West <swest@gmx.de> wrote:
>
>
>
> hi...
>
> i'm trying to sort out a problem with a table containing multiple
> entries and one div-overlay for each entry (let's call it entry-
> details), and i just can't get it to work properly:

In the first version, also set position: relative on div#shows_1.
z-index only applies to positioned elements, which is why your z-index:
10 wasn't doing anything.

> in one version i tried, the div that i'm showing/hiding scales the
> whole table up and down because it thinks it's part of the regular text.
> that i definately don't want!

In the second example, set position: absolute on div#shows_2. That takes
it out of the normal flow (so the table doesn't grow to fit it in), and
also puts it on top (positioned things are drawn on top of normal-flow
descendents anyway, no need to set z-index).

> the second version i tried looks fine somehow, but the z-index seems
> to be completely disrespected and then the text seems to be flowing
> out of the containing cell if it becomes too long...

Set position: relative on div#shows_3 to get the z-index working (or
just set position: absolute and don't bother setting z-index).

It overflows the containing cell because you use <nobr> (which amounts
to whitespace: nowrap) and you've set a width. There just isn't room for
the text and you've told the browser not to break lines, so it
overflows.

If you set position: absolute, get rid of z-index which is no longer
necessary (absolute things go on top anyway), and remove width: 100,
then the div gets a shrink-to-fit width (that's what absolutely
positioned things with auto width do), which means it grows to the right
size for the text.

Incidentally you should use "100px" not just "100".

[Back to original message]