I'm trying to finish up Conch's profile, but I just can't wrap my head around scrollbar overlays. I followed along with the instructions on the general pet profile CSS guide thread (or at least, I thought I did...), but my attempt at a scrollbar overlay doesn't want to be an overlay. The scrollbar reappears if I hover over it, moving the overlay to the side. I'm guessing the z-index wasn't enough to move it out of the main div, but my attempts to try and fix that haven't worked out. Can someone help me figure out what I'm doing wrong?
Also, I can't figure out why the pet color info moved up to the top of the page--previously, it was level with the owner name.
SPOILER (click to toggle)
<style>
{margin: 0; padding: 0;}
, , -ban, -ban-main, -lrc, -rrc {display:none;}
, , -right, , , , h2, a, {display:none;}
, , body, , {background-color:transparent;}
{display: none;}
.pet_name, .pet_age_info, .pet_wco_info_date, .pet_age_info_date {display:none;}
body,font,td,a,p,table,div,tr{color:;}
a:link,a:active,a:visited{color:;}
body {position:right; background:url(http://i41.tinypic.com/2v3nead.jpg); background-color:; background-repeat:no-repeat;background-attachment:fixed; overflow:hidden;}
{background-image:url(none); background-repeat: no-repeat; width: 150px; height: 150px; padding-top: 200px; padding-bottom: 0px; display:none;}
/if I can ever figure out the scrollbar overlay, here it is: http://oi42.tinypic.com/noy52s.jpg/
.pet_color_info { position: absolute; top: 150px; left: 465px; padding: 0px; margin: 0px; border: none; font-size: 12px; }
.owner { position: absolute; top: 150px; left: 645px; padding: 0px; margin: 0px; border: none; font-size: 12px; }
{position: absolute; top: 80px; left: 70px; text-indent: -9999px; font-size: 8.5px;} img {background: url('http://i41.tinypic.com/2gttgzd.png') no-repeat; padding: 64px 0 0 75px; width: 1px; height: 1px;}
{ position: absolute; overflow: auto; top: 274px; left: 68px; width: 190px; height: 300px; scrollbar-face-color: ; } .treasure_item img { width: 50px; height: 50px; } .treasure_item { opacity:0.5; margin-top:5px; margin-left:-9px; }
.treasure_item:hover{opacity:1}
{ position: absolute; left: 344px; top: 292px; width: 376px; height: 292px; font-size: 12px; overflow: hidden; }
{ float: right; background: url('http://oi42.tinypic.com/noy52s.jpg') no-repeat; left: 360px; top: 285px; width: 25px; height: 294px; font-size: 12px; overflow: hidden; z-index: 2; } p {text-indent: 25px;}
:hover { overflow:auto; }
</style>
<div id="main"> <div id="scroll_main"></div> <p> <p>Oh, hi, hi! What's your name? Where are you from? When's your birthday? Do you like chocolate ice cream or vanilla? <p> Oops! I'm sorry, please don't go away! My friends tell me all the time that I need to be more patient and remember to breathe sometimes when I meet somebody. I always forget, though, because I get really really excited when I make new friends! <p> ...we can be friends, right? I-I didn't scare you or anything? Please? <p> YAY!! <p> Um, oops? <p> Sorry... I just got excited again... and wanted to do a backflip more than usual... I didn't mean to splash you, honest... <p> Please don't say we aren't friends anymore. I'll make it up to you, double flipper-promise! Do you want ice cream? Or maybe this cool... um... I think it's called a dinglehopper? <p> Ooh, wait, I know, I know! Don't go away, okay? <p> ... <p> ... <p> ... <p> Sorry that took so long--here you go! It's a friendship bracelet, I made it myself from shells I found. It's really cool, isn't it? <p> What? No, it's not any trouble at all! love shells, so I go out every day and find some really pretty ones to add to my collection. <p> Like the ones on your new bracelet! See; here's a brown-banded wentletrap, which has the coolest name ever; and that's a calico scallop; and this kinda see-through one is a jingle shell. Like a jingle bell, only a shell, so you can't ring it, I know because I tried for ages and ages and at least seven whole minutes. I couldn't get them to make any noise, except when I hit them together, but that didn't sound like a bell at all. <p> My favorite shell is the conch, though--'cause that's my name, too! Conches--the shells, not the me--can make pearls, and you can put them against your ear and listen to the ocean, and they're shiny, and they can get bigger than big or even littler than me! Plus they come in all of these different colors and patterns and sizes and shapes and... and... <p> Um... <p> And other stuff, too! I think... <p> One time, I found this conch shell that was so ginormous that I thought it had to be one that my friend told me the sea-witch has. You know, the one she blows like a trumpet whenever she wants to listen to music or make a big storm or... <p> ...Or hurt somebody else... <p> Anyways, I went and picked the shell up and it pinched me, because it wasn't really a shell except it actually was but it was a shell like-- <p> GAAAASP! <p> ...Sorry, I got excited again and kinda sorta I forgot to breathe a little bit but anyways I found a shell and it pinched me! That's because it was a shell just like the one on my back, only not blue and also pointy instead of cir--circi--circular! That's 'cause this one had Shelby in it instead of a me, and it was actually Shelby who pinched me instead if the shell, and we're best friends forever and she almost never pinches me now! <p> Not that we can't be best friends, too! I-if you want to be, I mean. And if you don't, I'll still always be here if you need a friend--I promise! </div>
