CSS Scrollbar color[resolved]

**blur** · Sep 15th, 2004, 08:44 PM

Oh my goodness... this is making me nuts, it never had any problem before until now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
scrollbar-face-color: #118DDCC;
scrollbar-shadow-color: #444643;
scrollbar-highlight-color: #444643;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #118DDC;
scrollbar-track-color: #118DDC;
scrollbar-arrow-color: #118DDC;
}

</style>
</head>

<body>
dg
dsg
s
gds
g
s
gsdgsdgsd
g
 
d
sg
s
g
sg
sgs
gsg
sg
s
gs
  
</body>
</html>

Any problem with this code? I used DreamweaverFX. Some how it doesn't recognize the scrollbar code. Why??? Even when I previewed it in browser, I can't see the effect, this is weird...
Urgent plz help.

**blur** · Sep 15th, 2004, 08:51 PM

Oh my... this is so weird... once i remove the
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

It can appear!!!! Why???

**Acidic** · Sep 16th, 2004, 04:10 AM

CSS is not allowed to change the scrollbars. This is basically because you (as a web developer) are allowed to change the web page, but not the browser. That's for the visitor to control.

Anyways, when you didn't specify a doctype, then IE will show it, but when you've specified one, then it goes by those rules (or tries to). Those rules say that you're not allowed to edit the scrollbars, so it doesn't.

I don't think FireFox will ever paint in the scrollbars. You should code your pages to render in that. Go on, download it, I just read 300 000 people have DLed the 1.0 preview in 4 hours.

One more thing, code to XHTML, not HTML. The DOCTYPE would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**Jop** · Sep 16th, 2004, 06:33 AM

Try this, it will work in IE:

Code:

body,html{
	scrollbar-face-color: #118DDCC;
	scrollbar-shadow-color: #444643;
	scrollbar-highlight-color: #444643;
	scrollbar-3dlight-color: #ffffff;
	scrollbar-darkshadow-color: #118DDC;
	scrollbar-track-color: #118DDC;
	scrollbar-arrow-color: #118DDC;
}

Also for the Doctype, since you seem to want the transitional dtd you might want to use this one for your xhtml documents:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but that's up to you.

**CornedBee** · Sep 16th, 2004, 08:19 AM

Some technical clear-ups.

The scrollbar* properties are IE-proprietary. They are poorly named, because by the CSS specification, all non-standard properties should start with a -. Mozilla heeds this, thus for example the -moz-binding property, which is clearly marked as proprietary and Mozilla-only.
IE doesn't. Thus we have expression and scrollbar*.

Whatever.

Internet Explorer 6 made great leaps toward conforming to CSS, compared to IE5. An updated box model, many many bad things removed (but not nearly all).
However, doing this would have broken many if not most existing pages, which were authored to IE5. While not a bad idea from an idealistic viewpoint, in the harsh reality this is impracticable. So the IE engineers went the way the MacIE engineers had first explored and the Mozilla people had emulated and implemented quirks mode. By default, a page will render in quirks mode, meaning that all those stupid things IE5 did are still done.
If a page starts with the right DOCTYPE declaration, however, IE6 will switch to standards mode. And there are many changes there.

The one relevant here is that no longer the body is the root of all display, but the html. As such, scrollbars on the viewport are part of html, not body. And because of this, you need to set the scrollbar* properties on html, not body.

I personally disagree with the "code to XHTML". I think that XHTML pages should be served as XHTML, in which case, however, IE will not display them. Thus I say, stay with HTML4 (HTML4.01 Strict, to be precise) until IE actually supports application/xhtml+xml.

**blur** · Sep 16th, 2004, 08:24 AM

Ooooo.. thanks Jop! Got it! Thanks you very much, this really clears my doubt!

CornedBee... thanks to you too...

Also to Acidic.

For me to be able to change the scrollbar is the best thing coz it makes the site more personalized. Oh well...

**CornedBee** · Sep 16th, 2004, 08:35 AM

I think the functionality is absolutely useless and I don't miss it at all in Mozilla, but suit yourself.

**blur** · Sep 16th, 2004, 08:42 AM

Well... it'll depends on each individual

it's pretty useful for blog, more personalised.

**Jop** · Sep 16th, 2004, 09:06 AM

I personally disagree with the "code to XHTML". I think that XHTML pages should be served as XHTML, in which case, however, IE will not display them. Thus I say, stay with HTML4 (HTML4.01 Strict, to be precise) until IE actually supports application/xhtml+xml.

I totally see your point. I personally use Xhtml because it encourages me (and other developers that might read my code) to use correct markup and is more forward compatible. Personally I've got no problems with my browser interpreting it as html, as long as my code validates, I wil be sure that if all browsers support xhtml as xhtml my pages are fine.

Oh and by the way, I also think that you shouldn't change things that aren't yours to change, what if the user is colourblind and you make it hard for them to even browse around. But then again, I think this really depends on the audience you're trying to reach. For a bussiness I defenitely do not encourage it, but for your personal blog it's up to you.

**CornedBee** · Sep 16th, 2004, 09:21 AM

Colourbling users should be able to override author style sheets anyway with user stylesheets. I'm not sure if IE allows it, but if it doesn't and I was colourblind, surely I wouldn't use IE.
Not that I'm using IE as it is...

**blur** · Sep 16th, 2004, 11:40 PM

Jop. i agree... if business wise it's better not to use it.

Thread: CSS Scrollbar color[resolved]

Thread Tools

Display

CSS Scrollbar color[resolved]

Posting Permissions