Scrollbars? [Archive]

View Full Version : Scrollbars?

Niik

14th September 06, 06:17 AM

Hi!

Yesterday I tested to add my page a scrollbar.
The code is of course this:

scrollbar-face-color: #C3D2DA;
scrollbar-highlight-color: #C3D2DA;
scrollbar-3dlight-color: #C3D2DA;
scrollbar-darkshadow-color: #C3D2DA;
scrollbar-shadow-color: #A3B3BC;
scrollbar-arrow-color: #A3B3BC;
scrollbar-track-color: #A3B3BC;

I have used that code in my questbook and it works. If I try to add it to my CSS-file, it doesn't work. I have tested the bar with IE 7.0. Okay, I "hate" IE but I would like to have coloured scrollbars in my website.

Can I put the code to the CSS-file?
Then I think, can there be some codes in my website which don't allow use the scrollbars? :roll:

Game Makker

14th September 06, 09:32 AM

I thought that you can only colour scrollbars in IE? im not sure how though.

It might be something like this:

scrollbar-face {
color:#C3D2DA;
background-color::#C3D2DA;
}
/* etc etc */

Hope that helps. Thats off the top of my head though so sorry if it doesn't.

Niik

14th September 06, 10:06 AM

Thanks.
I will test that at home in the evening :)

dbldutch

14th September 06, 01:00 PM

The "scrollbar-..." are not valid CSS/XHTML properties... they only work on IE when you are not working with an XHTML document.

Game Makker

14th September 06, 03:15 PM

aa i thought so so sorry.

Niik

14th September 06, 03:40 PM

Okay, so I have to forget scrollbars.
I want to prefer XHTML :)

chrishirst

17th September 06, 08:22 AM

It should go in the body definition

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

dbldutch

17th September 06, 12:24 PM

Right.... but it still won't work in an XHTML. Correct?

chrishirst

17th September 06, 01:12 PM

an XHTML what ??

it's simply CSS, it just won't have any effect in anything other than Internet Explorer

dbldutch

18th September 06, 12:08 AM

sorry... "it won't work in an XHTML page"... or "it won't work when using XHTML"

chrishirst

18th September 06, 03:53 AM

Of course it will work when using an XHTML doctype.

You simply have to apply it to the outermost element you want it to affect. So to be effective on the page scrollbars apply the definition to the html element.

It will not validate as CSS though. This is absolutely nothing to do with what doctype you are using. It is simply because the properties are proprietary to Internet Explorer and not part of the W3C DOM.

dbldutch

18th September 06, 11:57 AM

I don't get the same results you do I guess... when I create the following file the scrollbars do NOT change colors.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollbar Test</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Scrollbar Test</h1>
</body>
</html>

If I change the top from
<!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">
To
<html>
It does work.

chrishirst

18th September 06, 10:02 PM

Yep removing the doctype will put IE into "quirks" mode, IEs very special own brand of bad behaviour.

with a strict doctype (unlinked because it's one of my development sites)

http://ma.cands.dnsalias.com/scroll.asp

dbldutch

19th September 06, 11:40 AM

I understand the doctypes and quirks mode. I never change the scorllbars so when the question was asked I ran a test as I thought it might not work with and XHTML doctype.

Well I ran the test like the code I posted. That in fact did not change the scrollbars. I couldn't figure out why yours did and mine did not so I looked at your code. It turns out that you have to use the following to change the main scroll bar.
html {
scrollbar-face-color: #C3D2DA;
scrollbar-highlight-color: #C3D2DA;
scrollbar-3dlight-color: #C3D2DA;
scrollbar-darkshadow-color: #C3D2DA;
scrollbar-shadow-color: #A3B3BC;
scrollbar-arrow-color: #A3B3BC;
scrollbar-track-color: #A3B3BC;
}

Using "html" instead of "body" will change the main scrollbar in IE. I did not have a scrollbar inside the page which would have changed using "body".

It looks like you only have to specify the "html" if you want all the scrollbars in your page to be the same.

As a side note, using "body" in quirks mode will change the scrollbars.

chrishirst

19th September 06, 07:38 PM

It looks like you only have to specify the "html" if you want all the scrollbars in your page to be the same.

You simply have to apply it to the outermost element you want it to affect. So to be effective on the page scrollbars apply the definition to the html element. Emphasis mine

All manner of incorrect things happen with IE in "quirks" mode

dbldutch

19th September 06, 08:05 PM

Not sure what you're talking about anymore. I was just showing why I was stating that it didn't work for me.

When you said "It should go in the body definition" and I tried that it wasn't changing the scrollbars... I didn't realize until you posted the link that it needed to go with the html info. That was never stated so I put that info in my last message that you quoted.

chrishirst

20th September 06, 06:07 AM

The post (#7) for placing it in the <body> was more in response to Game Makker in post #2.

Yes, I probably should have expanded the answer to include the point of using the <html> definition for affecting the main scrollbars, which is why I stated this in post #11 (the one I quoted in post #15)

Niik

21st September 06, 02:21 PM

Okay.
So how can you say it all in all?
Is it possible to get scrollbars in (x)html-document? ;)

chrishirst

21st September 06, 07:29 PM

Yes, you can have coloured scrollbars (but only in IE) when using a XHTML strict doctype

see my unlinked URL in post #13

Niik

22nd September 06, 05:14 PM

* Line: 501 Context : html

Property scrollbar-face-color doesn't exist : rgb(195, 210, 218)
* Line: 502 Context : html

Property scrollbar-highlight-color doesn't exist : #c3d2da
* Line: 503 Context : html

Property scrollbar-3dlight-color doesn't exist : #c3d2da
* Line: 504 Context : html

Property scrollbar-darkshadow-color doesn't exist : #c3d2da
* Line: 505 Context : html

Property scrollbar-shadow-color doesn't exist : #a3b3bc
* Line: 506 Context : html

Property scrollbar-arrow-color doesn't exist : #a3b3bc
* Line: 507 Context : html

Property scrollbar-track-color doesn't exist : #a3b3bc

It works but the validator..

chrishirst

22nd September 06, 08:32 PM

Errm Yes! It will not validate as CSS though. This is absolutely nothing to do with what doctype you are using. It is simply because the properties are proprietary to Internet Explorer and not part of the W3C DOM.