I am having problems with Firefox and IE7 to align a fixed background image to the top left corner of a scrolling text div.

Here is the webpsge in question:
http://bandvlaw.cgsart.com/site2/bratcher.html

Here is my css for that particular div:

.content {
position: absolute;
margin-top: 130px;
margin-left: 201px;
padding-top: 10px;
padding-right: 5px;
width: 552px;
height: 445px;
overflow: auto;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}

Now this works perfectly in IE6, but not Firefox of IE7. In those, the image is fixed, but the alignment is to the explorer window, not the div. So in average sized screens, you only see the bottom right of the photo.

If i remove the attachment: fixed, Firefox is fine, background sits right and doesn't scroll. Both IE6 & 7 they sit right, and they scroll.

I'm at a loss.


Also, as an added bonus on that same div, in Firefox the text rolls right out below the div, and slightly to the right. Were as IE6 & 7 it doesn't. That div is set to 552px x 445px, which is the exact size of the image. I can't for the life of me figure out why that is either. Same code as above for that div.

Any help is appreciated! Thanks!

Nobody knows how to fix this problem??

I think the problem with the background image is a combination between the absolute positioning of everything, and the margins. I don't see anything on this page that would need to be absolutely positioned. What is happening is the background image is getting hidden behind the margins. If you add "background-position:400px 200px" it will show the background. My pixel calculations aren't correct, you will need to play with those to get them right.
Now the next problem is that when yo do this, the background will scroll in firefox when you scroll the main page (not the div). I think it is because you aren't technically supposed to use a fixed background image on anything but the body???? Maybe someone else has more info on that.

Thanks anglele803,

Positioning is something I have problems with, as if i don't "absolute" position it, then the div's don't align right for me. I'll mess around with the background-position and see what happens.

As for FireFox headingoutside the defined div area, it wasn't, added padding and didn't decrease the div size.

Well, the unfortunate problem is, that it'll work in FF and EI7, but it moves the image in IE6.

IE6 doesn't support position:fixed at all, so you're not going to make it work there.

I have to agree with Angele - there's nothing in your layout that requires all that positioning.