Please HELP -Need some <div> help with positioning

[becca718]

If you unzip the attached file you will see the problem. When I click on one of the "tabs", the content disappears. I'm just not sure how to make this work. all help is very much appreciated!!

Becca

[Knightime]

email it to me Becca, not sure how long it will take sitepoint to validate your attachment.

[becca718]

URL is:

http://www.geocities.com/becca718/mp3.html

[Knightime]

Becca, I checked out the html for the site you hyperlinked. The main problem I saw is that you have no real css working for you. There are dozens of "id" and "class" attributes in use throughout your page that refer to no style that is defined. (i.e. class="panel" there is no panel class defined anywhere that I could see.
Take the time to reorganize your styles properly first. Move all of your style attributes and values to an external css and properly reference them and your mp3.html will shrink in half at least.
That seems like an incredibly long javascript for what you need to perhaps, but I am far from a javascript guru.
There is no DOCTYPE either, otherwise you could validate your html and start repairing errors.
Once you get your css properly built, put positioning attributes in your classes and the "tab links" will display where you want.

I wish I could help you more, but you really need to start fresh on that page, esp if you ever want it to validate. You have all the pieces in place I believe, so take some time and redo things and the result will make you much happier.
Good luck.

[becca718]

the style is inline...not external

[Knightime]

Try using positioning attributes "top", "left" "right" "bottom" to place something whereever you need, like "top: 150px;" (that will make it display 150 pixels from the top of the page and so on..). "z-index" might be causing problems too. Use a higher number for the top-most thing you need displayed. Try "z-index: 3;"

.panel{

width: 100%;
z-index: 1;
padding: 0;
border: 0;
visibility: inherit;
font: 12pt Arial,sans-serif;
color: navy;
overflow: auto;
}


you have an extra break below the opening bracket.
use "font-family" instead of "font".

[becca718]

when I modify the page size, the iframe moves. I need it to stay in the same place where the one that shows up in the first place is no matter what the screen resolution. Any ideas?