Fixed div background overlapping browser scrollbars

Question

Very strange behavior that I haven't seen before.

I have a fixed position div that has a transparent png background image. The z-index is set to -1 so that content can scroll over the fixed image with the scrollbars.

I have it positioned with the bottom and right at 0px, but the image overlaps the scrollbars (on FF and Safari, anyway.)

Here's the link:

http://adamjcas.www59.a2hosting.com/pg/show/id/4

CSS:

#plants /*for the cut paper plants in the background*/
{
    background: transparent url(../background_images/plants.png) no-repeat;                                         
    bottom:0px;
    right:0px;
    z-index: -1;
    position:fixed;
    height:691px;
    width:475px;        
}   

One hack I used was to use right: 16px;

Which worked fine, as there is always (probably) a right scrollbar. But the bottom scroll is only sometimes there. Is this a simple CSS issue?

Lanny

Answer 1

That was a strange issue. But I figured out that the scroll bar was not from the browser but instead from the parent div which had overflow: auto.

This is how I fixed that. Change the style for div id="rightpanel" to remove the overflow: auto;.

Then update the #rightcontent styles as follows:

#rightcontent {
    left: 445px;
    padding-top: 127px;
    position: relative;
    width: 650px;
}

Hopefully that should fix the issue for all browsers. Besides that I also found the browsers complaining about not finding Cufon.js. You might want to look into that as well.

Cygnet

Thanks for the help. The overflow was definitely the problem; when I made these changes it seemed to work on Firefox (except the background stopped repeating) but it fails in Chrome. Thanks for putting me on the right track; I'll keep at it and post the results. – Lanny

@Adam, Strange that seemed to work fine for me on Chrome, FF and IE. Did you make the changes to the rightContent as well? – Cygnet

I did. There's more going on though; the background of the #rightcontent div stopped before the bottom; the content was overflowing it. I'm going to post the final code when I get it done (minor issue at the moment on the greater list), but your pointing out the scrollbars were div overflow was what I needed. – Lanny

I was having the same issue. The scrollbar was from html, body{ overflow: auto } – Kish