Lion scrollbar colors

Question

The scrollbars in Lion seem to be based on the HTML's background color (lighter color BG = black scrollbars, darker BG = white).

The problem I'm running into is from what (I assume) is a common trick regarding footers. I usually set the background color for my HTML element to be the footer's color, that way if the page is shorter than the browser window the footer appears to continue on (since the BODY element ends and then the HTML element is what shows until the end of the page). Doing this, however, leaves the scrollbar based on the footer's color, not the content area's color.

Are there any other tricks to make footers continue when the page is shorter than the window, or anyway to force the color of Lion's scrollbars (ick)?

Answer 1

I just had the same problem, but this seems to solve it. Although I haven't thoroughly tested it with other browsers yet. Here is how I fixed it.

html {
  background: #151515;
}
body {
  background: #FFF;
}

I set the background color I wanted to fill the rest of the page as the html background color, and set the body background color to white to trick Safari to render the dark grey scroll bar. Hope this helps!

Answer 2

I might suggest to use the sticky footer technology. That will stick the footer to the bottom and will allow You to change the background-color in the same time.

Or, if You don't want Your footer to stick to the bottom, You could create a container, with 100% height of the window (there are lot's of possibilities to achieve this out there) and apply a background-color to the container and a different background-color to the html