View Full Version : Is there a valid way to have scrollbars in CSS?


Neptune
01-06-2004, 07:33 PM
I've been trying very hard to have my CSS be working, valid, etc., and I haven't found a way to have scrollbars and have it come up valid. I know they are only for IE, but does that effect the outcome?

This is my CSS:
<style type="text/css">
<!--
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:active {color: #ffffff;}
a:hover {color: #ffffff;}
a {text-decoration: underline;}

body {background: #000000 url(back.jpg) no-repeat top left fixed;}

p { font-weight: normal;
font-size: 10pt;
font-family: verdana, "courier new", monospace;
color: #ffffff; }

/* Internet Explorer only */

body {
scrollbar-face-color : #000000;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #ffffff; }

-->
</style>

Everything comes up fine until I add the scrollbar stuff.

kicker91
01-06-2004, 09:11 PM
colored scrollbars should work in newer versions of IE.

i don't know why you have courier new quoted, that could be one problem.

some browsers may not pick up the uncoded messages (/* and */). other than that, your ss looks fine...

Lissa
01-06-2004, 09:16 PM
You can't validate css with colored scrollbars, because colored scrollbars are for IE only.

Most people use them anyway, since the css is just ignored by other browsers.

Neptune
01-06-2004, 10:54 PM
Okay. I was curious if I was coding wrong or something. Thank you both :)

Kicker: The reason I have Courier New quoted is because I read that it helps define that it is one font instead of two. Who knows if it works, but I might as well give it a try :lol:

pb&j
01-07-2004, 12:59 AM
give this a try...

<!--[if gte IE 5.0]>
<style type="text/css">
body {
scrollbar-face-color : #000000;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #ffffff; }
</style>
<![endif]-->

Neptune
01-07-2004, 01:03 AM
Should I put it in at the scrollbar part or before the code entirely (meaning the <!--[if gte IE 5.0]> and <![endif]--> pieces)?

pb&j
01-07-2004, 03:03 AM
take out your current scrollbar stuff.
the bit of code i posted should probably be on its own in your HEAD area after your current STYLE area.
it is untested, so i dont know if it really works for sure.


<style type="text/css">
<!--
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:active {color: #ffffff;}
a:hover {color: #ffffff;}
a {text-decoration: underline;}

body {background: #000000 url(back.jpg) no-repeat top left fixed;}

p { font-weight: normal;
font-size: 10pt;
font-family: verdana, "courier new", monospace;
color: #ffffff; }
-->
</style>

<!--[if gte IE 5.0]>
<style type="text/css">
body {
scrollbar-face-color : #000000;
scrollbar-highlight-color : #ffffff;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #ffffff;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #ffffff; }
</style>
<![endif]-->

Neptune
01-07-2004, 04:03 AM
I forgot to mention I was using external css :blush: So it doesn't exactly use the extra part when I put it there. I can see why that would happen though.
I did try using it as embedded css, and that did work. Either way it didn't turn out being valid, but it was worth a shot! Do you think it would be better to use it like that when using embedded css?

Thox
01-07-2004, 06:59 AM
It's not valid CSS because it's simply not part of CSS, it's just extra functionality added by Microsoft for no apparent reason (like filters). The arguement goes that CSS should not be able to control scrollbar colours because they are not part of the site, they are just part of the browser.

pb&j
01-07-2004, 01:39 PM
one more suggestion is to try using javascript to apply the style...

<script type="text/javascript">
window.onload = function()
{
var htmlStyle = document.getElementsByTagName('html')[0].style;
var bodyStyle = document.body.style;
bodyStyle.scrollbarFaceColor = htmlStyle.scrollbarFaceColor = 'red';
bodyStyle.scrollbarArrowColor = htmlStyle.scrollbarArrowColor = 'blue';
bodyStyle.scrollbarTrackColor = htmlStyle.scrollbarTrackColor = 'green';
bodyStyle.scrollbarShadowColor = htmlStyle.scrollbarShadowColor = 'gray';
bodyStyle.scrollbarHighlightColor = htmlStyle.scrollbarHighlightColor = 'yellow';
bodyStyle.scrollbar3dlightColor = htmlStyle.scrollbar3dlightColor = 'brown';
bodyStyle.scrollbarDarkshadowColor = htmlStyle.scrollbarDarkshadowColor = 'skyblue';
}
</script>

(change the colors to the code or name of your choice of course.)

there is no space in the word "html" in this part but the forum breaks it...
('html')[0]
so you may have to fix that if you are doing a straight copy and paste.

Neptune
01-07-2004, 05:59 PM
It works! Even comes up valid! Great! Thank you so much :)

Lissa
01-07-2004, 10:05 PM
YAY!! Go pb&j :lol: I never would have thought of that!

rundellt2000
01-08-2004, 08:00 AM
thanks pb&j, when I tried to validate my css it didn't work, but that script really helped!

iGeek
12-30-2004, 09:45 PM
Hold the show...
Can all browsers recgonize(sp?) that bit of JavaScript? Is there ONE way to change the colors that all browsers can recgonize(sp?)?

edit:

AND...
Could you put the code inbetween(sp) these so the forum doesn't break iot up? I am having troubles firguring what spaces to delete

iGeek
12-30-2004, 09:49 PM
AND...
Could you put the code inbetween(sp) these so the forum doesn't break iot up? I am having troubles firguring what spaces to delete

kittycat
12-31-2004, 12:17 AM
The only browser that supports coloured scrollbars is IE for Windows. There's no way you can change the scrollbars in others.

As for spaces, there shouldn't be any in these words
scrollbarFaceColor etc
getElementsByTagName

samf
01-25-2006, 06:13 PM
This is an old post looks like but I wanted to point something out. What about scrollbars for div style="overflow:scroll" ? that SHOULD be css because it's a part of the element. It is a control - such as a submit button - and should allow user control. The idea that CSS *SHOULDN'T* handle it is not one I agree with, so certainly I'm not part of this argument. The apparent reason is that a designer doesn't want a gray scrollbar in the midst of elements, all of which can be otherwise controlled by CSS.

Sam

It's not valid CSS because it's simply not part of CSS, it's just extra functionality added by Microsoft for no apparent reason (like filters). The arguement goes that CSS should not be able to control scrollbar colours because they are not part of the site, they are just part of the browser.

djou
01-26-2006, 01:36 AM
This is an old post looks like but I wanted to point something out. What about scrollbars for div style="overflow:scroll" ? that SHOULD be css because it's a part of the element. It is a control - such as a submit button - and should allow user control. The idea that CSS *SHOULDN'T* handle it is not one I agree with, so certainly I'm not part of this argument. The apparent reason is that a designer doesn't want a gray scrollbar in the midst of elements, all of which can be otherwise controlled by CSS.

Sam

"overflow" is a correct, existing CSS property. The idea behind the saying (which I completely agree with) that a scrollbar is part of the browser and not the website is that, on any computer program, the scrollbar is a facility that the program enables when there is too much content for it to be displayed in the screen. It will happen in text editors, music players, instant messengers, etc., just like it will appear on websites. When you add overflow:scroll, you are telling the browser that, if this part of content doesn't fit in its container, it must create a scrollbar instead of spreading the "container".