CSS for Scrollbars & W3C

Forum Moderators: not2easy

Message Too Old, No Replies

CSS for Scrollbars & W3C

Why don't they support it?

silverbytes

7:50 pm on Sep 23, 2003 (gmt 0)

body
{
scrollbar-face-color: #e2e2e2;
scrollbar-shadow-color: #CCCCDD;
scrollbar-highlight-color: #BBBBBB;
scrollbar-3dlight-color: #E4E4E4;
scrollbar-darkshadow-color: #E4E4E4;
scrollbar-track-color: #F5F5F5;
scrollbar-arrow-color: #F5F5F5;
background-repeat: repeat-y;
margin-left: 0px;

}

W3c validator don´t like but what is wrong?

buckworks

7:54 pm on Sep 23, 2003 (gmt 0)

Coloring the scrollbar is an IE-only thing, therefore the validator doesn't like it.

If you reeeeally want to color the scrollbar, take those bits out, make sure your CSS is valid otherwise, then put them back in.

BlobFisk

10:23 am on Sep 24, 2003 (gmt 0)

It's also worth mentioning that you don't need to specify a unit on 0 values:

margin: 0; is just fine.

jetboy_70

11:09 am on Sep 24, 2003 (gmt 0)

Also worth mentioning if you're working in XHTML ...

In XHTML the scrollbar is considered part of the <HMTL> tag and not the <BODY>. If you put an XHTML doctype declaration in your page with the CSS as it is, the coloured scrollbar will not display in IE6.

If you change the declaration to:

html, body
{
scrollbar-face-color: #e2e2e2;
scrollbar-shadow-color: #CCCCDD;
scrollbar-highlight-color: #BBBBBB;
scrollbar-3dlight-color: #E4E4E4;
scrollbar-darkshadow-color: #E4E4E4;
scrollbar-track-color: #F5F5F5;
scrollbar-arrow-color: #F5F5F5;
}

body
{
background-repeat: repeat-y;
margin-left: 0px;
}

it'll fix things up nicely.

hartlandcat

8:40 pm on Sep 24, 2003 (gmt 0)

Coloring the scrollbar is an IE-only thing, therefore the validator doesn't like it.

Actually, it's an IE&Konqueror-only thing.

</pendantic>

...actually, Opera 7 also supports it if it's manually enabled.

RobinC

9:16 pm on Sep 24, 2003 (gmt 0)

...and apparently Mozilla will never support it unless the w3c ratify it - and if they do I for one won't update unless it can be manually turned off in the config ;-)

Shadows Papa

12:20 pm on Sep 25, 2003 (gmt 0)

May I ask - and this isn't intended to offend:
Why do people want to recolor the scroll bars?
To me it's like when all the web "newbies" 10 years ago wanted blinking/flashing text. A local city web site - our own capital city, has colored their scrollbars to red. It's as unprofessional looking as one can get on a city site that represents the capital of a conservative state. Frankly, when I first ran into a site with the scrollbars changed it was confusing - I wanted to scroll, but the familiar looking scrollbars were just plain gone. It threw me so I thought I couldn't scroll down. I used the pagedown key instead. Then I realized what they were doing. Sorry, folks - but I hope it never becomes a supported standard - or if it does, I can easily disable it when visiting such a site. The scrollbar is part of my browser, not the site, so to me, it's hands-off. That's only an opinion and it appears that this is the place for fact but I had to know why, I guess :)

Shadows Papa

silverbytes

5:41 pm on Sep 25, 2003 (gmt 0)

Because scrollbars are part of the interface.
You can´t deny controlling that part of design doesn't help.
I have a gray and white site and hue of system scroll bars are really enhanced by the .css I'm using.

In the other hand futuristic themed designs are spoiled by the old system color.

And personally I think W3C is a permanent bothering... why should I discuss design matter with them?

Reflection

5:59 pm on Sep 25, 2003 (gmt 0)

You can´t deny controlling that part of design doesn't help.

How does forcing a change to someones browser help your design? It only annoys people, you dont hear people responding with "oh look at my pretty scroll bars im going to buy something from this site now" they are more likely to hit the back button and ignore your site all together.

And personally I think W3C is a permanent bothering... why should I discuss design matter with them?

Ummm because they help develop standards that make your job as a web developer much easier, without them web design would be more chaotic than it already is.

edit_g

6:03 pm on Sep 25, 2003 (gmt 0)

And personally I think W3C is a permanent bothering... why should I discuss design matter with them?

They're trying to make things easier, not harder. If you don't want to worry about them - don't. But if people come along to your site and it looks like <snip> in any other browser than IE6, and never come back, you have your answer as to why people do pay attention.

Sharper

6:24 pm on Sep 25, 2003 (gmt 0)

I "color scrollbars" on most of my sites. It's not because I have anything against the defaults, but in this particular case, I have a fixed section on the right-side of the browser, then the "content" section on the left side. Since the content section is more than a screenfull, the vertical scrollbar ends up between the two sections.

The default scrollbar is ok and part of the browser when it's way over on the right side, but looks pretty bad in the middle of a screen done in other colors, since the colors clash horribly. So what I did was to first make the scrollbar background match the site background, to blend it in better. Then I set the rest to complimentary colors that stand-out in order to avoid the where's the scrollbar game.

So there are legitimate uses, especially when the scrollbar is part of the page instead of part of the browser border.

wkitty42

7:23 pm on Sep 25, 2003 (gmt 0)

<devil's advocate>
who even uses scrollbars anymore? all my mice have wheels on them and i just position my mouse over the area i want to scroll and roll the wheel ;)

some of my machines are voice controlled... the verbal command "scroll up" and "scroll down" also work well :)
</devil's advocate>

Farix

8:20 pm on Sep 25, 2003 (gmt 0)

I have a fixed section on the right-side of the browser, then the "content" section on the left side.

I'm sorry, but that sounds like a very bad design and a possible abuse of frames. But if you want to keep something "fixed" on the right, you can use a floating div instead of frames.

My basic view is that the scroll bar is part of the browser's interface and is not a page element. I don't want a webmaster to change the size of my browser window or the browser's theme just to make it "look better" with their site. I'm the one who makes the choices on how my browser looks and the webmaster can just butt out of it.

choster

8:41 pm on Sep 25, 2003 (gmt 0)

I have to agree as well against viewing the scrollbar or other "browser chrome" as design elements. They are more like traffic signs. In a bout of school pride the University of Illinois may clad its buildings, plazas, fences, and students in orange and blue, but woe befall him who paints the stop signs. They're still octagonal, say STOP, and stand just where they always have, but someone's bound to be run over before the day is through.

silverbytes

10:23 pm on Sep 25, 2003 (gmt 0)

You can talk about how important are users with other browsers than IE... but the real thing is no one care.
They are less than 3%.
And like it or not scrollbars are seen at very same moment design is seen. If they are ugly and I can do something about it I will. W3C should understand that, after all if 97% people is able to see it, why don´t accept is a standard?

Farix

12:00 am on Sep 26, 2003 (gmt 0)

The default scroll bars makes the webpage look "ugly"? That is one of the most absurd arguments I've ever heard.

You can talk about how important are users with other browsers than IE... but the real thing is no one care.
They are less than 3%

Depends on who you ask. But either way, non-IE browsers are growing. Especially if webmasters start leaving Easter Eggs for those Mozilla/Opera users.

If they are ugly and I can do something about it I will. W3C should understand that . . .

The W3C understands the difference between the webpages and the browser's interface. They understand that their role is to developed recommendations for the former and not to touch the latter.

after all if 97% people is able to see it, why don´t accept is a standard?

So the W3C should accept IE's broken implementations of W3C's recommendations? That is a step backward instead of a step forward.

silverbytes

12:08 am on Sep 26, 2003 (gmt 0)

Well don´t have intention of keep writting on this toppic but really: no one takes seriously a 3% of people... Opera is growing, good for opera.
I don´t care, I like my coloured scrollbars!
And I think I will create paintyourscrollbars.org ...

By the way do you use Opera?

I don´t know a single person that uses it.. and when I see logs I understand why my scrollbars are so colorfull

Shadows Papa

2:34 am on Sep 26, 2003 (gmt 0)

I keep seeing "3%" and wonder where that comes from? Is this an official study? If so - I'd like to know who conducted it - if not, I respectfully disagree. Yes, that many people don't have IE because it's part of the Windoze OS, but a lot more folks run browsers other than IE.
Maybe also that 3% is among "certain crowds", but I'm seeing different numbers in my crowds.
I'm a professional IT Analyst specializing in computer security - many of my peers use Opera and other non-IE browsers. In fact, I'd have to say of the folks I know, at least 10% are not IE users.
Now take the other crowd I'm in - antique engine and tractor collectors, each of us with web pages, some quite large and popular - we did a survey lately and found that between 60 and 70% of all visitors to our sites collectively ran 800x600 resolution. About 3/4 ran IE. (sneak in a few scripts and a database, instant poll)
Did you know that many folks will preach that one should never change the size, shape or color of form "submit" buttons as it confuses the average person who is "used to" the standards and doesn't know what they are if changed? I know - it happend to me! I changed the buttons and I had people writing saying they wanted to order things but didn't see the order buttons. The size and colors were changed.
Anyway, what's within the borders of my browser is yours, the browser, my desktop, all menus, scrollbars, buttons, screen size/color, etc is mine. I also note that the one company that does allow such things - good old Bill Gates, is no shocker at all. The browser is like a radio or TV and the scroll bar the volume or channel control.
If I wanted NBC to repaint the bezel on my TV screen........ but in my thinking the scrollbar is like the taskbar in Windoze or the menu colors in Word. I view only what's between the gray borders as content. However, I see the old man is outnumbered by young folk who believe they can do what they wish and the rest of the world should like what they do. I'd submit to you that folks who change scrollbars are under 35, folks who don't like it are over 35.

Otherwise, I'm dropping off this topic lest I get kicked off! Time to return to technical solutions for technical problems. I have real content to deal with. I'm surprized the forum master has stood back for so long.......and I don't wish a 2x4 across the hands.

Shadows Papa

Farix

3:35 am on Sep 26, 2003 (gmt 0)

By the way do you use Opera?

I don't. I use Mozilla personally. I like the tab browsing, especially when I'm reading forums, and it's built in popup blocker, which is a real lifesaver. I also like that I can do a Google search directly from the address bar, has full PNG support, adheres much closer to the W3C recommendations then IE6 and has a fuller implementation of CSS Levels 1 and 2. Essentially, it can do more.

silverbytes

11:58 pm on Sep 26, 2003 (gmt 0)

I love other browsers like netcaptor... but people doesn't use it either, really .
By the way take a look at your logs and tell me how many opera users you get...
I don´t hate browsers and don´t love IE but is true: all people uses it, at least all of my visitors

Daisy

12:58 am on Sep 27, 2003 (gmt 0)

Hey I am over 40 and use Phoenix. IE scrollbars are ugly and should be colored. Opera and Mozilla pretty theirs up and ignore whatever the webmaster thinks. Everybody wins.

D_Blackwell

2:24 am on Sep 27, 2003 (gmt 0)

If I can see it and get at it - it is a design element.

Mostly I just want to blend in the color scheme of the page.

In my dreams I can force full screen viewing. I know people who give up practically 25% of their screen to an arsenal of toolbars they don't even use.

Farix

4:34 am on Sep 27, 2003 (gmt 0)

Browser stats as of August for a RPG club website I help maintain.

74488 82.12% MSIE 4 and up
4046 4.46% Mozilla
2335 2.57% Opera

I expect to see Mozilla go up this month as I successfully convinced several of our regular visitors to try it out and they subsequently fell in love with it. Hopefully, I can increase the number even further as I start incorporating several Mozilla-based Easter eggs into the pages (one of which is a CSS menu system).

BergtheRed

5:34 pm on Sep 27, 2003 (gmt 0)

so many things ...

jetboy_70: tanks mang! that little bit of info may get me doing xhtml again! excellent info.

Shadows Papa: i'm over 40. and i color my scroll bars ...

everyone who complained about colored scroll bars: exactly what color IS the bar in Mozilla ...

everyone who complained about having your browser "hijacked" and it's "out of bounds": exactly what part of the browser application is acted on by this code: window.defaultStatus and window.status. let's not forget JavaScript window re-sizing either.

love it or hate it --it gives the web designer control over how their web page is presented. how your site is presented to the world and what it looks like. if i have a dark gray'ish ( or any other ) color scheme on my site and now IE let's me blend those scroll bars into my site and make them more an integral PART of my site --i'll use it. just like any other design element, you can make it look terrible. or you can make it blend in with your site. IE just gives you that choice to use it.

Shadows Papa

3:35 am on Sep 28, 2003 (gmt 0)

Visit the site for Des Moines and tell me it's not the ugliest you've seen.
Add to that the fact that the city colors are mainly blue - the new bridges all have blue rails, the new fancy footbridges over the interstate are blue arches, then to see blood red scroll bars - looks like the browser was wounded attempting to show their pages. Yikes! No wonder only gangs ever come here.

I'd like to sample a couple of pages that have scrollbars recolored. (URL's in sticky mail possible?)
How are IE's bars and Netscapes so different? On my computer, both seem to be gray/silver! Maybe NS7 has a tinge of color but otherwise, I don't see them being better - hardly even different. IE's like them or not at least match the OS! I've not run Opera since I rebuilt my network and computers so can't say what it's like now.

Don't even think of resizing my browser - I never run full-screen because I always run about 10 apps at once, the browser window is just one of many and I like to flip between apps like I flip between papers on my desk. If I want to view your page full-screen, I'll switch my own browser over, thank you. You can suggest to me how your site will look best.
I never ever have had only one app running full screen on my computer. Even in the days of DOS, I ran multi-tasking software to run multiple apps as once in "windows". (note, however, that I use the term "multi-tasking" loosely - a PC design doesn't and can not allow true "multi-tasking", only time slicing/sharing)
I currently have 12 applications and windows running, my browser is at about 90% screen. I'm also using 3 computers right now. I reach "around" the browser to my desktop to hit another app or window. Nother ever gets my full screen.

Shadows Papa

claus

4:06 am on Sep 28, 2003 (gmt 0)

>> The scrollbar is part of my browser, not the site

Agree.

My browser (CrazyBrowser) configuration does not allow change of the window status bar. It does not allow popups. It does not allow background sound. It does not allow videos to start automatically. It does not allow changing window size. It does not allow animated gifs. No Flash, Java, or ActiveX either.

The only thing i can't seem to disable is that colored scrollbar, and it annoys me big time.

This is scary:
>> In my dreams I can force full screen viewing

I have a high-resoulution screen precisely because my windows should not fill the whole screen. It's my PC and my screen - i decide. If sites don't work in something like 800x600, i'm not using them unless i absolutely have to.

This is even more scary:
>> If I can see it and get at it - it is a design element.

No, it's a security risk, that's what it is. Web designers should never-ever be able to change anything on a client machine except a cookie.

/claus

MonkeeSage

6:00 am on Sep 28, 2003 (gmt 0)

I run Windows XP on one of my computers, and have a custom visual style applied. It has gradient window widgets (buttons, scrollbars, checkboxes, &c.).

One thing I can't stand is when I visit a site in IE and all of the sudden my scrollbars are 2d (bad enough) and bright purple (or some other obnoxious color) and totally wreck the visual style -- and to add insult to injury, I can't get my original scrollbars back the whole time I'm browsing that site!

The buttons and checkboxes being styled differently from the visual style is not so bad, because they are 'inline' -- inside of the browsing frame -- but when the scrollbars are changed it effects the way the 'outter' frame looks compared to other windows. Being a symmetry freak, I loathe when it happens.

Thankfully I don't use Explorer as my default browser, so I don't have to worry about it, but I sure wish that for those times when I do have to fire it up they would provide an option to disable that feature. I mean...what's the point of allowing for visual styles if the apps they are applied to are just going to override them without asking!?

Jordan

victor

7:09 am on Sep 28, 2003 (gmt 0)

but I sure wish that for those times when I do have to fire it up they would provide an option to disable that feature

Here's how to almost do that. Set up a CSS file with the elements you don't want overridden. Or the elements exactly how you want them. Example, using silverbytes original CSS:


body
{
scrollbar-face-color: #e2e2e2!important;
scrollbar-shadow-color: #CCCCDD!important;
scrollbar-highlight-color: #BBBBBB!important;
scrollbar-3dlight-color: #E4E4E4!important;
scrollbar-darkshadow-color: #E4E4E4!important;
scrollbar-track-color: #F5F5F5!important;
scrollbar-arrow-color: #F5F5F5!important;
background-repeat: repeat-y!important;
margin-left: 0px!important;
}

(Note the !important tag added to each rule. That almost guarantees it won't be overriden by incoming CSS]

Now go to Tools / Internet Options / Accessibility (your menus may vary -- I'm looking at IE 5.5). Tick "Format document using my stylesheet", and give it the name.

You may then need to clear IE's cache and restart it for IE to notice the difference.

Shadows_Papa can now view the Des Moine's web site with sunken 3d gray scrollbars (as Silverbytes wants)-- or whatever they want: simply add your own CSS to the accessibility file.

MonkeeSage

7:27 am on Sep 28, 2003 (gmt 0)

victor:

Great tip! I had forgotten about the custom stylesheet option. Works perfectly! But it doesn't preserve my visual style which uses bitmaps to style the scrollbar...so, to go one step further, I used transparent as the value for every attribute and added the html element to the selector...

body, html { 
 scrollbar-face-color: transparent!important; 
 scrollbar-shadow-color: transparent!important; 
 scrollbar-highlight-color: transparent!important; 
 scrollbar-3dlight-color: transparent!important; 
 scrollbar-darkshadow-color: transparent!important; 
 scrollbar-track-color: transparent!important; 
 scrollbar-arrow-color: transparent!important; 
}

Now my bitmap-styled scrollbars are always intact! :D

Tested against this page:

[w3.org...]

Thanks again!

Jordan