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:
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)?
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?
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.
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
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.
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".
|