scroll bar color trouble

**CBeery** · 05-22-2012, 10:46 PM

I am helping someone with a website & I cant get scroll bar to show colors can someone help me please. thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="bp.css"  />
<br>
<br>
<script>
<!--
/*
Background music script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/

//specify FULL path to midi
var musicsrc="AllOutofLove-AirSupply.mid"
if (navigator.appName=="Microsoft Internet Explorer")
document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="-1">')
else 
document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="0" height="0" autostart="true" loop="true">')
//-->
</script>
<title>Barbie Passion</title>
<style type="text/css">
body 
{
scrollbar-arrow-color: #F6B0B0;
scrollbar-base-color: #941714;
SCROLLBAR-HIGHLIGHT-COLOR: #F6B0B0; 
scrollbar-dark-shadow-color: #941714;
scrollbar-track-color: #941714;
scrollbar-dark-shadow-color: #000000;
}
</style>

</head>

<body><div id="wrap">

<div id="header"><br />

<h3><font color="#F660AB">http://www.barbiepassion.com</h3>
<p><strong>"Create some Magic today... "</strong><br /></p>

</div>

<img src="header.jpg" width="790" height="228" alt="" />
<div id="agmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="faq.html">FAQ</a></li>
<li><a href="http://www.renderosity.com/mod/bcs/index.php?vendor=antje">Online Store</a></li>
<li><a href="AGWall.html">WallPaper</a></li>
<li><a href="AG2D.html">Freebies</a></li>
<li><a href="AGGallery.html">Gallery</a></li>
<li><a href="AGItems.html">Prints</a></li>
<li><a href="AGLinks.html">Links</a></li>
</ul>

<div class="leftside">
<img src="SDiv.gif" alt="" />
<p><a href="http://www.twitter.com/Antjesgraphics"><img src=
"twitter.jpg" height="27" width="70" class=
"left" alt=
"Follow Antjesgraphics on Twitter" /></a><br />
<a href="http://www.myspace.com/antjesgraphics"><img src=
"myspace.jpg" height="27" width="70" class=
"left" alt="visit us on myspace" /></a><br />
<a href=
"http://www.facebook.com/home.php#!/profile.php?id=100000665942472">
<img src="facebook.jpg" height="27" width="70" class=
"left" alt=
"visit us on facebook" /></a></p>

<p><img src="SDiv.gif" alt="" /><br />


<img src="th_1-we.gif" /></a></p>

</div>
</div>
<div id="rightside">
<br />
<h3>
<p><img src="SDiv.gif" alt=""/></p>
<h3>
<font color="#F660AB">Contact Suzanne:</h3>

<a href= "mailto:eyez4hire@aol.com">
<img src="suzzane.jpg" height="75" width="58" class="left" 
alt="Email Suzanne" /></a><font color="#F660AB">Suzanne Stephan<br /></h3>
<br />
<p><img src="SDiv.gif" alt="" /></p>
<h3><font color="#F660AB">Links:</h3>
<p><img src="heart.gif" alt="arrow" width="7" height=
"7" /> <a href=
"http://www.renderosity.com/mod/gallery/browse.php?user_id=25872">Renderosity
Gallery</a><br />
<img src="heart.gif" alt="arrow" width="7" height="7" />
<a href=
"http://www.renderosity.com/mod/bcs/index.php?vendor=antje">Renderosity
Store</a><br />
<img src="heart.gif" alt="arrow" width="7" height="7" />
<a href="http://antjedarling.deviantart.com/">Deviant Art
Gallery</a><br /></p>
<p><img src="heart.gif" alt="arrow" width="7" height=
"7" /> <a href=
"http://www.art.com/gallery/id--a44642/antje-darling-posters.htm?ui=F8031CEFDC7F46F99CF64EA1257F13A7">
Posters on Art.com</a><br />
<img src="heart.gif" alt="arrow" width="7" height="7" />
<a href="http://www.cafepress.com/adarling">Cafepress
Items</a><br />
<img src="heart.gif" alt="arrow" width="7" height="7" />
<a href="http://www.zazzle.com/adarling/gifts">Zazzle
Items</a><br /></p>




</div>
<div id="midpage">
&nbsp;<h2><img src="logo.gif" alt="button" width="223"
height="95" /><font color="#F660AB"> Welcome !</h2>
<p>As you can tell alot of things have changed on this website..
I'm in the process of re-designing everything and I'm very sorry
to say that the Antjesgraphics online store will no longer be
available. Bez and I would like to thank all of you who purchased
from us through our online store. We very much appreciate your
support! Customer service is also still fully available for your
purchases. Our Renderosity Stores remain open and we hope we see
you there :o)</p>
<p><img src="Barbiehead.gif" height="100" width="125" class=
"left" alt="picture1" />I've uploaded a few new images to my
Renderosity Gallery. Think I am finally starting to get back into
things.. though lately I've had more fun sketching and painting
in photoshop than playing with poser.</p>

<h3><img src="logo.gif" alt="button" width="223"
height="95" /></h3> 
<h3>Whats New?:</h3>
<p>My daugher Sarah started selling her fantastic work at
Renderosity as well :o). I'm very proud of her,... she's so
talented! :o) <img src="Barbiehead1.gif" class="right" height=
"100" width="125" alt="picture2" /></p>
<p>Sarah and I worked on our newest product together. It's called
<a href=
"http://www.renderosity.com/mod/bcs/grunge/84969">Grunge</a> and
consists of 30 dynamic grunge brushes and 10 highres grungy
backgrounds. Since the brushes are dynamic they will only work in
PS7 and higher.</p>

</div>
<div id="footer">Copyright &copy; 2012 Craig Diehm.</div>
</div>





</body>
</html>

**ApacheTech** · 05-23-2012, 12:23 AM

Here's a tutorial. Although, it only works in Internet Explorer. Viewing with any other browser will show default scrollbar colours.

http://www.jacorre.com/design/scrollbarcolor.htm

**CBeery** · 05-23-2012, 01:32 AM

Code:

<style type="text/css">
 body {
 scrollbar-3dlight-color: ;
 scrollbar-arrow-color: ;
 scrollbar-DarkShadow-Color: ;
 scrollbar-Face-Color: ;
 scrollbar-Highlight-Color: ;
 scrollbar-Shadow-Color: ;
 scrollbar-Track-Color: ;
 }
 </style>

is not working thats why i came hgere so the tutorial does me no good

**keyboard** · 05-23-2012, 01:59 AM

What web browser are you using - (if it isn't IE it wont work)

**james438** · 05-23-2012, 02:58 AM

Opera

Firefox does not currently allow for the customization of scrollbar colors.

The same is true with your script. When I put the html tag before the doctype your script works for me. It may not be the correct way of doing things, but it will get your script to work.

**ApacheTech** · 05-23-2012, 03:45 AM

Originally Posted by james438

When I put the html tag before the doctype your script works for me. It may not be the correct way of doing things, but it will get your script to work.

Please don't try this. Delibrately invalidating your website goes against everything that web developers have strived for for decades.

There are options to hide the default scrollbar and create your own scrollbar, with whatever design you like. Much like Facebook's sidebar/ticker/chat list scroller.

This is a much better solution than delibrately nullifying your DOCTYPE; and it will work in all browsers.

**james438** · 05-23-2012, 06:12 AM

I suppose this is true, but scrollbar customization is not standard either. It was first created by internet explorer back in 5.5 onwards. Other browsers have been reluctant at best to adopt the usage of scrollbar css. The only other browser that I am aware of that allows for it is Opera. Sadly, in one of its recent releases this feature was recently unintentionally broken. I have reported it to the Opera web developers a while ago, but some fixes take longer to correct than others. Until then I know how to get it to operate if I ever want to.

I don't want to get into it too much, but I am somewhat more flexible on the adherence to web standards. I have my reasons.

Thread: scroll bar color trouble

Thread Tools

Search Thread

scroll bar color trouble

Bookmarks

Bookmarks

Posting Permissions