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?

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.