Need some help with scrollbar color. [Archive]

View Full Version : 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:
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:

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...

<!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>



</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...

<!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">



</head>
<body>

<div></div>

</body>
</html>

scrollbar.js...

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 (http://www.tommys-service-enterprise.gmxhome.de/index.html) if you care.
The only thing I still want to change now is that the popup windows here (http://www.tommys-service-enterprise.gmxhome.de/somkor.html) (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 :)

coothead

12-10-2006, 02:47 PM

Hi there Twey,

There's really no point in doing this
I totally agree. :D

Having a truly valid page is what counts
I totally agree. :D

I notice here...

http://www.twey.co.uk/includes/FadableObject.js
that you are working with opacity another item that will invalidate CSS.
What are your thoughts concerning this?

coothead

Twey

12-10-2006, 03:26 PM

opacity is not invalid. It is a part of the CSS3 specification. I find it interesting that you chose the single one of all the properties with which I work in that script that is, in fact, completely valid :)
KhtmlOpacity, MozOpacity, and filter are all invalid proprietary extensions. However, they are different methods of accomplishing a task that has been deemed valid by the W3C, so I judge them acceptable for use, although inferior to opacity (note that the script gives preference to opacity if available).

coothead

12-10-2006, 06:33 PM

Hi there twey,

I do not doubt that what you have written is absolutely true. ;)

Nevertheless the validator still gives me this mysterious information. :eek:

W3C CSS Validator Results for file://localhost/TextArea

To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Errors
URI : file://localhost/TextArea

* Line: 5 Context : #image

Property opacity doesn't exist : 1

Perhaps, with your infinite wisdom, you could explain the reason for this anomaly. ;)

coothead

mwinter

12-10-2006, 07:03 PM

Property opacity doesn't exist : 1

The CSS validator uses various profiles during validation, each of which correspond to a CSS specification. The default profile is for CSS 2, in which the opacity property is absent.

Although changing the profile would validate the declaration, use the profile for the version of CSS you are actually writing for and accept any errors for missing properties in other versions.

Mike

coothead

12-10-2006, 07:42 PM

Hi there Mike,

thanks for the illumination. ;)

coothead