Internet Explorer offer CSS elements to style scrollbars, for example class
.FlatScrollbars
{
scrollbar-face-color: #f0f0f0;
scrollbar-shadow-color: silver;
scrollbar-highlight-color: silver;
scrollbar-3dlight-color: #f0f0f0;
scrollbar-darkshadow-color: #f0f0f0;
scrollbar-track-color: #f0f0f0;
scrollbar-arrow-color: #000000;
}
applied to a DOM element will render nice flat scrollbars:
Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME?
First of all, the above style has to be applied to the child page loaded into IFRAME, *not* parent page that hosts the IFRAME. Ordinary it’s applied to BODY element of the page. But sometimes, for example if your DOCTYPE is XHTML 1.0 Transitional – this doesn’t work. If that’s the case – and this is a kicker – apply the style to HTML element of the page, yes I am talking about
<html xmlns="http://www.w3.org/1999/xhtml" class="FlatScrollbars">
or even (if you want to assign class programmaticaly in ASP.NET code behind) in ASPX markup:
<html xmlns="http://www.w3.org/1999/xhtml" runat="server" id="xHTML">
and in VB code behind:
xhtml.Attributes("class") = "FlatScrollbars"
By the way, if you’re interested in quality design and skilled developers who knows tricks like mentioned above, take a look at Berliner Webdesign Agentur – they do awesome programming in HTML, PHP, CSS, and JavaScript.