[GUIDE] Hidden Scrollbars

[-l Tootlez l-]

#about h2 {display: none;}
#about {color:#50617b; text-align:center; background: transparent; width: 220px; height: 181px; margin-left: 115px; margin-top: 170px;}
#about ol{overflow: auto; overflow-x: hidden; overflow-y: hidden; }
#about ol ul {background: #000; position: absolute; left:226px; top:-10px; height:*; width:500px;}

---------------------
<about bbcode>

[align=center][size=18]I am [u]the[/u] [b]Tootlez[/b]![/size][/align]

[size=13] [b]I DO [u][i]NOT[/i][/u] MAKE PROFILES, DON'T ASK!!![/b][/size]

[size=10]
I LOVE InuYasha ... he's totally like my bf [future hubby] :mrgreen:

I'm a dork and put journal on the image, and totally forgot that i'd have to link it and never got to it SOOooo...:stare:
[/size]
[list=1][list]I AM BUSY WORKING ON A NEW LAYOUT ... PLEASE BE PATIENT WITH ME![/list][/list]

i tried this and it's still not working...
I'm probably misunderstanding.

so am supposed to make the ol and ul and put the first selector info in the ol and the 2nd selector in the ol ul? or the first in the about and the 2nd in the ol?

[KayleyV2]

Based on what I can see, you are missing a bunch of crucial properties that cause the section to overflow.

Your code:
#about ol{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 200px; position: absolute; left:226px; top:-10px;}
#about ol ul {background: #000; height: 180px; width:500px; overflow-y: auto; padding-right: 50px;}

The things in red are what I added in. You need the height in the first code so the section knows where to cut off. You need the height in the second code for the same reason. You need to add overflow-y; otherwise the section will not scroll at all. The padding-right hides the scrollbar by moving it over 50px. Essentially, the scrollbar on ol ul is hiding under the ol. That's how this coding is formulated.

Another problem with how you are trying it is that you are trying to apply it to your "I AM BUSY WORKING ON A NEW LAYOUT ... PLEASE BE PATIENT WITH ME!" thing at the top of the page. It is much too short to show a scrollbar at all, unless you set the height to like 10px or less. The text needs to be long enough that it becomes necessary for a scrollbar to hold it all within the specified dimensions.

I also moved the positioning codes because if you put it on the ol ul it will move out of the ol and therefore mess up the whole process.

[Curling Iron]

thanks, this will help me mrgreen

[-l Tootlez l-]

Kayley FC

Another problem with how you are trying it is that you are trying to apply it to your "I AM BUSY WORKING ON A NEW LAYOUT ... PLEASE BE PATIENT WITH ME!" thing at the top of the page. It is much too short to show a scrollbar at all, unless you set the height to like 10px or less. The text needs to be long enough that it becomes necessary for a scrollbar to hold it all within the specified dimensions.

I also moved the positioning codes because if you put it on the ol ul it will move out of the ol and therefore mess up the whole process.

I'm not trying to apply it to the small line of text, I'm wanting to apply it to the larger section starting that the "I am the Tootlez" and ending before the list tag. That was the problem since the ol was the small part and setting the scroll to it didn't make sense.
I changed a few things and tried to apply it to the way you said, and I still isn't working right. I made the whole thing apart of a list.

[KayleyV2]

If you want the larger section to be the one that scrolls, that's the section you need to put in the list tags.

[-l Tootlez l-]

sorry i feel stupid ... sweatdrop

ok I put the whole about section in a list, then since i still want the other section it too is going to be in a list as well
so then I put the selector stuff in the plain about section, then I put the selector2 stuff in the about ol right?!

[-l Tootlez l-]

hotcha! I figured it out! ... XD ... man I feel stupid ...

[Ristox]

Read over "[GUIDE] Hidden Scrollbars" however I wasn't sure if the guide was specific or generalized. I've managed to get the scrollbar hidden on my comment section, however when I try the same trick on the custom panels to the far left I'm no longer capable of scrolling the panels at all. I've tried every variation I could think of.

Have I perhaps gotten my commands backwards in where they should be?

Far right panels in question:

#id_custom_5925{background: transparent; margin-top: -262px; margin-left: 380px; overflow:auto; overflow-y: auto; overflow-x: hidden; height: 95px; width: 155px;} /* Right 1 */
#id_custom_5925 h2{background: transparent; }
#id_custom_5925 ol{overflow-y: auto; padding-right: 50px; height: 85px; width: 155px;}


#id_custom_5927{background: transparent; overflow-x:hidden; overflow-y: auto; height: 95px; width: 155px;margin-left: 380px; } /* Right 2 */
#id_custom_5927 h2{background: transparent; }
#id_custom_5927 ol{overflow-y: auto; padding-right: 50px; height: 85px; width: 155px;}

[KayleyV2]

Sneaky Martith

Read over "[GUIDE] Hidden Scrollbars" however I wasn't sure if the guide was specific or generalized. I've managed to get the scrollbar hidden on my comment section, however when I try the same trick on the custom panels to the far left I'm no longer capable of scrolling the panels at all. I've tried every variation I could think of.

Have I perhaps gotten my commands backwards in where they should be?

Far right panels in question:

#id_custom_5925{background: transparent; margin-top: -262px; margin-left: 380px; overflow:auto; overflow-y: auto; overflow-x: hidden; height: 95px; width: 155px;} /* Right 1 */
#id_custom_5925 h2{background: transparent; }
#id_custom_5925 ol{overflow-y: auto; padding-right: 50px; height: 85px; width: 155px;}


#id_custom_5927{background: transparent; overflow-x:hidden; overflow-y: auto; height: 95px; width: 155px;margin-left: 380px; } /* Right 2 */
#id_custom_5927 h2{background: transparent; }
#id_custom_5927 ol{overflow-y: auto; padding-right: 50px; height: 85px; width: 155px;}

You need to use list tags in your custom sections. Just treat them like About sections.

Once you put on the list tags and switch the "overflow-y: auto;" in each of the default custom codes to "overflow-y: hidden;", it should work.

@ Tootlez ~ I'm glad that you've got it working. 3nodding

[Ristox]

Worked like a charm, thank you. I didn't think to try treating the Custom panels like the About panel.

[Pixilated Envy]

Oh I <3 U. I can't wait to try this out. I have been looking for something like this for a while. I find the scroll bars so ugh.

[Lady Cressida]

Thank-you for this guide. This is way better then having those ugly scroll bars. I am having couple troubles for old school.

#1 My About Me section scrolls, but some of the info is cut off on the side. Is there a way to fix it so the info isn't cut off?

#2 About Me invisible scroll part works for IE, but I'm having problems with the Comments. It scrolls, but only the caption border scrolls and not the comments itself. If you look on IE you know what I'm talking about. Is there a cheat for IE to make the whole comment section scroll and not the caption border?

[KayleyV2]

Lady_Cressida

Thank-you for this guide. This is way better then having those ugly scroll bars. I am having couple troubles for old school.

#1 My About Me section scrolls, but some of the info is cut off on the side. Is there a way to fix it so the info isn't cut off?

#2 About Me invisible scroll part works for IE, but I'm having problems with the Comments. It scrolls, but only the caption border scrolls and not the comments itself. If you look on IE you know what I'm talking about. Is there a cheat for IE to make the whole comment section scroll and not the caption border?

1) You need to set a smaller width for the #about ul. Right now it is wider than the actual About, so it gets cut off on the right.

2) Try adding this:
#comments{position: relative;}

[freaxy]

ninja