stacking divs

hidden divs should show up in the same place when made visible

[matttt]

I have:

<td id='tips'>
<div class='tiphidden' id='tip1'>CONTENT</div>
<div class='tiphidden' id='tip2'>CONTENT</div>
<div class='tiphidden' id='tip3'>CONTENT</div>
<div class='tiphidden' id='tip4'>CONTENT</div>
</td>

The class of each div is changed to 'tipvisible' whenever a user mouses over the page object associated with that tip. Unforntatly all of these divs are being placed as though they are <p>'s (first above second above third...), but i would like them all to be in the exact same place.

The content above this TD is variable, so there is no way i can use absolute. Does CSS have some sort of "absolute relative to the containing box" property?

[abulafia]

>>Does CSS have some sort of "absolute relative to the containing box" property?

Yes. You have to set the position attribute of the container (absolute or relative will do). Then the elements within can all be set absolute to the container.

#tips { position: relative; }

[matttt]

I have set it up as such, but i'm still getting the stack problem.

<table id='outter'>
<tr>... header row is here... </tr>
<tr>
<td id='tips'>
<div class='tiphidden' id='1'>Tip 1 Content</div>
<div class='tiphidden' id='2'>Tip 2 Content</div>
<div class='tiphidden' id='3'>Tip 3 Content</div>
</td>
<td id='content>...main content..</td>
<td> ... </td>
</tr>
<...more rows>
</table>

table#outter {position: absolute;}
td#tips {position: relative;}
div.tiphidden {position: relative; top:0px; left:0px;}

Do i need to declare position:relative on the tr as well?

[coho75]

i'm still getting the stack problem

Do you mean that the items all appear 1 below the other? Something like:

Content1
Content2
Content3

How would you like them laid out? Do you want them side by side? If this is the case, you might want to use 'span' in place of 'div.' 'Div' sets thing as a block, while 'span' allows you to place items inline.

[matttt]

I'm sorry, i thought i had said. I want them all to always be in the top left corner. The idea is that all of then start hidden, and as i mouse over certain areas of the content page (headers or links) a 'tip' will appear on the left, always at the top of the table cell. So i switch from 'tiphidden' to 'tipvisible'.

right now as i mouse over the hot spots, the divs are showing up each in a different place as though they were each a hidden paragraph with no positioning done.

[matttt]

*****QUOTE*****
Yes. You have to set the position attribute of the container (absolute or relative will do). Then the elements within can all be set absolute to the container.

#tips { position: relative; }
****END QUOTE****

Is there some reason why this works perfectly (like 100% of other css attributes do) in IE, but doesn't work at all (Like 20% of other css attributes) in firefocker and netscrape?

In the latter case, the absolute 0,0 div is placed at the top corner of the page, rather than the top corner of the relative positioned <td>

[matttt]

problem solved.

<td id='tips'>
<div class='relative'>
<div class='tiphidden'>
...more tips
</div>
</td>

firefocker doesn't consider 'position:relative' to be a valid style on a td. It just does nothing. So if you put a div inside the td and position THAT relative, then its all good and all 'absolute' elements inside will go to the box instead of hte page.