I know I'm not the only one who is ripping out my hair to figure this out (I'm going to start looking for people with little bald spots for this reason)

I have tried what seems like every suggestion in the history of this forum to create a transparent scrollbar for my div. I'd settle for translucent, too. Everything I've tried gets me a solid color. (From lime green to yellow and back to gray.) I'd be ever so grateful if someone would tell me WHAT I'm doing wrong!

My aggravating code:

<table width="500" height="380" background="paws.jpg" border="0">
<tr><td height="120" colspan="0"></td></tr>
<tr><td width="30"></td>
<td valign="right"><p align="center">
<div style="width: 440; height: 232; overflow: auto; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;
scrollbar-face-color : #CCCCCC; scrollbar-highlight-color : #CCCCCC; scrollbar-3dlight-color : #CCCCCC; scrollbar-shadow-color : #CCCCCC; scrollbar-darkshadow-color : #CCCCCC; scrollbar-track-color:transparent; scrollbar-arrow-color : #000000; filter: chroma(color=#CCCCCC);">


<table width="440" height="232">
<tr><td height="20" colspan="0"></td></tr>
<tr> <td width="20"></td>
<td width="405">

<hr align="center" size="4" width="30%" color="purple">
<font face="papyrus" size=9 color="CC99CC"> <center> N.E.T.A.</font>
<br>

<font face="papyrus" size=5 color="CC99CC">
<b>N</b>eopians for the <b>E</b>thical <b>T</b>reatment of <b>A</b>nimals <br>
(and Sentient Objects)

</font>

<br>

<font face="papyrus" size=3 color="CC99CC"> Petpets and Should-be-Petpets of Neopia
</font>
</center>

<hr align="center" size="4" width="75%" color="purple">
<p>
<font face="papyrus" size=4 color="CC99CC"> <b> Please visit Nutmeggem's petpage for more about this collection.</font> </p>
<center><a href="http://petpages.neopets.com/~NutmegGem">
<img src="http://img.photobucket.com/albums/v386/Seebster/petpetsitelink.jpg" alt="NutmegGem and her Petpets">
</a>

<hr align="center" size="4" width="75%" color="purple">

<font face="papyrus" size=5 color="CC99CC">
<b><u>Family Portraits</u></b>
<br>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=Hazeqi">
<img src="http://img.photobucket.com/albums/v386/Seebster/hazeqi_framed.jpg" alt="Hazeqi and Sue the Baby Blu">
</a>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=Zenith_flyer">
<img src="http://img.photobucket.com/albums/v386/Seebster/zenith_framed.jpg" alt="Zenith_Flyer and Zenidy, the Weewoo">
</a>

<br>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=MightyRoarMeow">
<img src="http://img.photobucket.com/albums/v386/Seebster/mightyroar_framed.jpg" alt="MightyRoarMeow and Andrew, the Hornsby">
</a>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=mid_air">
<img src="http://img.photobucket.com/albums/v386/Seebster/midair_framed.jpg" alt="Mid_Air and Soara, the Crokabek">
</a>


<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=NutmegGem">
<img src="http://img.photobucket.com/albums/v386/Seebster/nutmeg_framed.jpg" alt="NutmegGem and Amber, the Alkenore">
</a>

<br>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=LoialAl">
<img src="http://img.photobucket.com/albums/v386/Seebster/loialportrait.jpg" alt="LoialAl and Harry, the Harris">
</a>

<a href="http://www.neopets.com/search.phtml?selected_type=pet&string=Nadir_Nest">
<img src="http://img.photobucket.com/albums/v386/Seebster/nadirportrait.jpg" alt="Nadir_Nest and Shadow, the Pirakeet">
</a>

<br>



<hr align="center" size="4" width="30%" color="purple">


</td>
<td width="15"></td></tr>
<tr><td height="20" colspan="0"></td></tr>
</table>

</div>
</td>

<td width="25"></td></tr>

</table>

try putting this:

allowtransparency="true" style="filter: chroma (color=#CCCCCC)

in the place of:

filter: chroma(color=#CCCCCC)

try putting this:

allowtransparency="true" style="filter: chroma (color=#CCCCCC)

in the place of:

filter: chroma(color=#CCCCCC)


Hmm, that doesn't seem to fit the language of where it is (it's already after style=" and the allowtransparency="true" seems like normal HTML not the CSS) and didn't work. I also tried putting allowtransparency: true; filter: chroma(color=#CCCCCC); to no avail.

:confusion:

Did I do that wrong?

hm..well i've got that on my website for my iframe and i've got all my css stuff on a style sheet..but your thing's for neopets...so i'm not sure..sorri :(

twix was right. that is how you do it. yes, the allowtransparency thing is regular HTML. there is no way around it if you want transparent scrollbars. i looked at your original code, and i fixed a few errors. Here is it with the transparancy stuff as well.

<div style="width: 440px;
height: 232px;
overflow: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
all of that can be replaced simply with border: 0; because you want all of your borders to be the same width.
scrollbar-face-color : #CCCCCC;
scrollbar-highlight-color : #CCCCCC;
scrollbar-3dlight-color : #CCCCCC;
scrollbar-shadow-color : #CCCCCC;
scrollbar-darkshadow-color : #CCCCCC;
scrollbar-track-color: you had transparent as the color here and that is not a "color" if you will... you actually have to put a color code there.;
scrollbar-arrow-color : #000000;
filter: chroma(color=#CCCCCC);" allowtransparency="true">

Now, some reasons that this may not be working for you is one, it ONLY works in IE so if you are using anything else, then it won't show as transparent. and 2, if you don't have enough content in your div for it to scroll, then you won't see the scrollbar.

Hmm....thanks for your replies :) Unfortunately I'm still having trouble. I must still be doing something wrong. Am I getting closer?

<table width="500" height="380" bgcolor="black">
<tr><td height="145" colspan="0"></td></tr>
<tr><td width="30"></td>
<td valign="right"><p align="center">
<div style="width: 420px; height: 175px; overflow: auto; border: 0;
scrollbar-face-color: #CCCCCC; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #CCCCCC; scrollbar-shadow-color: #CCCCCC; scrollbar-darkshadow-color: #CCCCCC; scrollbar-track-color: #CCCCCC; scrollbar-arrow-color: #7d69ff; filter: chroma(color=#CCCCCC);" allowtransparency="true">

I do have enough content to get the scrollbar, and I am using IE...

can you post a link to your page please?

can you post a link to your page please?

Glad to :) I had a lot of fun making the graphics and layout! I've got the scrollbar colored to where it's tolerable, but I'd of course still really like to know how to do this transparency thing.

http://www.neopets.com/browseshop.phtml?owner=seebster

something's up with your computer then...

http://blue-starz.net/scroll.JPG

I see a transparent scrollbar

something's up with your computer then...

http://blue-starz.net/scroll.JPG

I see a transparent scrollbar


:::gasp:::

A transparent scrollbar!!!! How lovely is the transparency! I wonder what's up with my computer...very strange...
That's AWESOME! Thank you so much!!!