Z-Indexing

[Brink Kale]

Okay, so check my profile out then. I didn't fix it completely to I.E standards but, the basic concept should show. Take a look at my GUI codes in particular. Notice how I use both z-index and visibility. One to hide the section until the hover and the other to keep the buttons beneath the section.

My code is free to share, so you can use what you want from it. Just avoid using the images, if you do host it on your own webhost please. =) I also didn't set the bar yet, I got lazy xD. I'll try to keep it up as long as I can, otherwise I'll probably change it pretty soon.

[Trevvvor]

It confuses me. Sorry, I'm imcompetent.

[Brink Kale]

Well, I'm not too sure how much better I can explain it. =( I'm not very good at communicating ideas and concepts. Best I can tell you is to copy my code and pick at it until you understand it better.

Here it is, please use your own image host in your testing etc. =) Everything outside the GUI codes are purely aesthetic.

Code

#equipped_id, #profile .avatar, #extendedProfileBody #header h1
{ display: none;}

/* Cursors from Maplestory */
#main, #sidebar
{ cursor: url('http://advimages.nexon.net/MapleStory/leafgear/image/cursor/hand_shadow.cur'), auto;}

.section
{ cursor: auto;}

.section a:hover
{ cursor: url('http://advimages.nexon.net/MapleStory/leafgear/image/cursor/hand_shadow.cur'), auto;}

body, html
{ background: #666666 url('http://i603.photobucket.com/albums/tt112/brinkale/gaiaonline/otherprofile/iphoneback3.png') top center no-repeat;}

body
{ width: 800px; margin: auto; height: 800px;}

#content #main
{ height: 800px; overflow: hidden;}

#content
{ background: transparent;}

/*Start iphone 3G GUI */
/* Begin About */

#about
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#about h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 199.5px; left: 271.5px; z-index: 10;}

#about:hover
{ visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

/* Begin Details */

#details
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#details h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 190.5px; left: 370.5px; z-index: 10;}

#details:hover
{ visibility: visible; position: absolute; top: 181px; left: 229.5px; z-index: 100; background: #000000; *top: 160px;}

/* Begin Journal */

#journal
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#journal h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 200px; left: 484px; z-index: 10;}

#journal:hover
{ visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

/* Begin Comments */

#comments
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#comments h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 305px; left: 272px; z-index: 10;}

#comments:hover
{ visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

/* Begin Friends*/

#friends
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#friends h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 305px; left: 380px; z-index: 10;}

#friends:hover
{ visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

/* Begin Wishlist*/

#wishlist
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#wishlist h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 295px; left: 474px; z-index: 10;}

#wishlist:hover
{ visibility: visible; position: absolute; top: 160px; left: 229.5px; z-index: 100; background: #000000;}

/* Begin Signature*/

#signature
{ visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; overflow-x: hidden; overflow-y: auto; z-index: 100;}

#signature h2
{ visibility: visible; background: transparent; width: 58px; height: 58px; text-indent: -1000px; position: absolute; top: 412px; left: 272px; z-index: 10;}

#signature:hover
{ visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

/* Begin Multimedia */

#multimedia
{ *visibility: hidden; background: #000000; color: #ffffff; width: 292px; height: 335px; *overflow: hidden; top: -360px; position: absolute; left: 0px; z-index: 9; *position: static; *top: 0px; *left: 0px;}

#multimedia h2
{ *visibility: visible; background: #00ff00; width: 58px; height: 58px; text-indent: -100000px; position: absolute; top: 773px; left: 484px; *top: 412px; *left: 484px;}

#multimedia:hover
{ *visibility: visible; position: absolute; top: 191px; left: 239.5px; z-index: 100; background: #000000;}

#multimedia embed
{ width: 291px; height: 335px;}

#multimedia object:nth-of-type(2n+1)
{ width: 291px; height: 335px;}

/* End GUI */

/* Name */
#profile h2
{ position: absolute; top: 60px; left: 349px; *top: 40px; *left: 348px; overflow: visible; color: #ffffff; width: 100px; background: transparent;}

[Trevvvor]

You had ' ' around the bckgrnd img url and it wasn't showimg up in the themes tester. Now I gotcha. Thanks.