Hello there. I am relatively new to CSS. I wanted to create a page that has "tabs" at the top, and clicking on the tabs would cause the content of the page to change without having to load a new page or refresh. So, I figured that the best approach would be to put the "content" for each of the tabs in its own table, then position the tables such that they are right on top of each other, and then use &#106avascript to change the visibility when someone click on the tab, so that only one of the tables shows up at a time -- the one that contains the content of the tab that was clicked. In order to get the tables to layer precisely on top of each other, I set their position to absolute and set the left and top properties each to 0px. This worked great and the tables now appear exactly on the same spot on the page. Now, I don't want these tables to show up on pixel 0,0 of the browser window per se. Just pixel 0,0 of the containing block that it is in. But it doesn't seem to be working that way (like I thought it would). It is literally appearing at pixel 0,0 of the browser window no matter what. Any other objects I put near it do not affect its position at all. I've tried nesting it in another table with a 300px cellspacing but that didn't work. I tried inserting a dummy image before that table, and the table moved down like it should, but my positioned tables remained at pixel 0,0. What am I doing wrong? I thought that position:absolute was supposed to position the object according to its containing block. Shouldn't the table with the 300px cellspace be the containing block in this case? And therefore shouldn't pixel 0,0 of that containing block be pixel 300,300 of the browser window? I would try using position:relative but that doesn't seem like it would work, because I have no way of knowing exactly how many pixels it should be moved from its normal position in order to make it align perfectly with the other table.

There's a way around this. You should put these tab pages in a layer that has its position explicitly set to relative.
An example:

That works beautifully. Thanks a million!

I guess it just doesn't work well with tables. I could have sworn that I tried nesting it inside a relative block...and I did, however that wasn't a <div> it was a table instead.

But who needs tables, right? I'm trying to kill that table-dependence that lives within me. I haven't learned many new things since like 1998 and all my web pages look like tables nested within tables nested within tables, ad nauseam. HTML <font> tags everywhere. I'm very excited to see how my pages look once I start using separate style sheets and storing my content in a database instead of writing a new HTML document for every little page of content that I have.

Quote:If you use the 'display' property to show/hide each table, then you can have the tables replace each other without having to manualy position them.

Excellent. That's a good point. So you think there will be a "flash" or a "flicker" when they switch, due to one table disappearing before the other one appears?