Need some help with scrollbar color.

**Cheng** · 12-09-2006, 01:42 PM

Hi.

I'm trying to change the color of the scrollbars using CSS.
The body CSS lokks like this but I can't get it to work.
Am I missing something?
It wont work in FF or IE.

Thanks in advance.
Cheng

Here the CCS that specifies the scrollbar color that isn't working:

Code:

body {
	scrollbar-face-color: #000000;
	scrollbar-highlight-color: #FFFF00;
	scrollbar-3dlight-color: #FFFF00;
	scrollbar-darkshadow-color: #FFFF00;
	scrollbar-shadow-color: #FFFF00;
	scrollbar-arrow-color: #FFFF00;
	scrollbar-track-color: #000000;
	color: #FFFF00;
	background-color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px
}

**ddadmin** · 12-10-2006, 06:59 AM

Scrollbar coloring only works in IE fyi. You may need to add the "html" element to your CSS as well:

Code:

html, body{
"
"
}

**Cheng** · 12-10-2006, 07:30 AM

.......alright.
I think that will work.
After I applied this CSS I let you know.

Thank you very mch.

**Cheng** · 12-10-2006, 08:40 AM

.......thanks!
It's working fine now.
But when make the CSS validation it shows this error message (see attachment).
Can this be fixed so it will be valid CSS?

Thanks again.

**coothead** · 12-10-2006, 11:08 AM

Hi there Cheng,

as scrollbar coloring is an IE proprietary, it's use will always cause invalid CSS.

coothead

**coothead** · 12-10-2006, 12:42 PM

Hi there Cheng,

Can this be fixed so it will be valid CSS?

Well, if you really have your heart set on valid CSS you could, of course, apply the scrollbar coloring for IE with javascript...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
    color:#ff0;
    background-color:#000;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px
}
div{
    width:300px;
    text-align:justify;
    margin:auto;
 }
</style>

<!--[if IE]>
<script type="text/javascript">
window.onload=function(){

   hObj=document.getElementsByTagName('html')[0].style;

   hObj.scrollbarFaceColor='#000'
   hObj.scrollbarHighlightColor='#ff0';
   hObj.scrollbar3dlightColor='#ff0'
   hObj.scrollbarDarkshadowColor='#ff0';
   hObj.scrollbarShadowColor='#ff0'
   hObj.scrollbarArrowColor='#ff0';
   hObj.scrollbarTrackColor='#000'
 }
</script>
<![endif]-->

</head>
<body>

<div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p><p>
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium, 
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa. 
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec 
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
</p><p>
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis 
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet 
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor 
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla 
feugiat. Cras mauris.
</p>

</div>

</body>
</html>

coothead

**Cheng** · 12-10-2006, 01:05 PM

Hi coothead.

Thanks a lot I realy appreciate it.
This is working but I want to call the script from an external javascript file and I can't manage to do this.
Could you help me out here by showing me how this works.

Thanks again very much.

**coothead** · 12-10-2006, 01:22 PM

Hi there Cheng,

try it like this...

page...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!--[if IE]>
<script type="text/javascript" src="scrollbar.js"></script>
<![endif]-->

</head>
<body>

<div></div>

</body>
</html>

scrollbar.js...

Code:

window.onload=function(){

   hObj=document.getElementsByTagName('html')[0].style;

   hObj.scrollbarFaceColor='#000'
   hObj.scrollbarHighlightColor='#ff0';
   hObj.scrollbar3dlightColor='#ff0'
   hObj.scrollbarDarkshadowColor='#ff0';
   hObj.scrollbarShadowColor='#ff0'
   hObj.scrollbarArrowColor='#ff0';
   hObj.scrollbarTrackColor='#000'
 }

coothead

**Cheng** · 12-10-2006, 01:43 PM

Hi coolthead.

Got it already.
I added the scrollbar javascript to the one javascript file I had already and it wasn't working but now I placed the Link to call the script as the last one underneath the starfield background which shouldn't make any difference but it did.
Now I got everything working like I wanted to with valid XHTML and valid CSS.
You can have a look here if you care.
The only thing I still want to change now is that the popup windows here (click the images center bottom) will be windows without a frame like tooltips but I couldn't manage yet.
Maybe you got an idea how to do this.

Thanks again very much.

**Twey** · 12-10-2006, 02:11 PM

There's really no point in doing this. Having a truly valid page is what counts, not simply having the validator say it's a valid page; if you're using Javascript to modify the page to make it invalid, it's not a valid page, no matter what the validator might say

Thread: Need some help with scrollbar color.

Thread Tools

Search Thread

Need some help with scrollbar color.

Bookmarks

Bookmarks

Posting Permissions