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!