How do I get a layer to display over a table

[robert89]

I have a table of contents in a div. The TOC displays when a link is clicked. It displays on top of everything else which is held in a second div.

Everything was working great til I got to a page where part of the content was layed out in a table. On this page the table of contents displays on top until it reachs the table, at which point it displays behind the table.

I have the div holding the TOC set with a z-index: 1. I tried setting the table's z-index to two but it still displayed on top of the toc div. I then tried putting the table in it's own div, and setting the z-index of that div to 2 but alas didn't work.

Can anyone help.

Thanks,

 

[1DMF]

I'm lost as to what has the higher number z-index, it needs to be "The TOC".

I have no problem displaying a floated div and its contents over a table, so it isn't a normal issue you are experiencing.

what CSS or code do you have applied to the underlying table which seems to be showing over the TOC

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Hi IDMF,
The TOC is set with a z-index of 1
I gave the div that the table sits within a z-index of 2, therefore, i expected the TOC to sit on top but it doesn't. When it meets up with the table inside the second div it goes behind the table.

 

[1DMF]

no the higher the number is what puts it in the foreground.

if I had a layer and I want to be sure it floats over everything I give it a z-index of 9999999 not 1.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Hi IDMF,
That has always confused, numbering vs layer display order, so thanks for clarifying. Now I should remember.

Bob

 

[1DMF]

no probs, I take it it now displays ok.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Affraid not. Here's the code I am using. The help div holds the table. In i.e. the toc div pushes the table down. In firefox the table within the help div displays on top of the toc div.

/* Sets position of toc divs */
#related, #toc
{
float: right;
z-index: 6;
width: 50%;
background-color: #eeeeee;
padding-left: 10px;
padding-right: 10px;
margin-left: 10px;
border-top: #355667 dotted 2px;
border-bottom: #355667 dotted 2px;
font-size: 90%;
}
#help
{
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
z-index: 4;
}

 

[1DMF]

do you have a url for me to look at?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Unfortunately this material isn't live and I am not the one who makes it so.

 

[1DMF]

i need more than just a piece of CSS to go on :-( , any chance of all the HTML and CSS ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Hi IDMF,
Thanks much. Unfortunately, I can't pass over the code and I know it's much easier to help if you can see the whole picture.

I am experimenting with the z-index on all elements and appear to be getting more and move of the content that was on top into the background.

Thanks much for your help. Looks like you set me on the right path. I'll do follow up post when I have solution.

Bob

 

[1DMF]

no probs, good luck.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[robert89]

Hi IDMF,
I had the table width set to 100%. I removed the 100% and it flows. The table gets squeezed left while the toc is dropped down.
Thanks again for you help.

Bob

 

[1DMF]

glad you got it sorted

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.