Workaround for background-attach:local?

[LucentPhoenix]

Hello. I was referred to this forum by a member on Ars Technica. I hope you all can help me.

I'm working on a project currently, where we have a calendar displayed on a webpage, within a div. The div has a background, and the style attribute "background-attachment:scoll;". For a while, we couldn't figure out why the background would scoll in IE, but not in Firefox. Supposedly, IE was "broken," according to all the articles I had read about it, but I couldn't figure out why, because it looked like it was working just fine.

Then I stumbled across the why. Apparently, what we need to use to get the desired effect was not the "scroll" attribute, but the "local" attribute, which makes the background scroll according to the local element, not the viewport. Well, the problem with that is that "local" is a CSS3 implementation, and nothing really supports it.

So... does anybody know of a workaround for this? Preferably, we'd like to keep using the div. We used an iframe previously, but we want to keep this as efficient as possible, and not have two connections open.

Thanks

[JAB Creations]

If I find myself needing to use anything proprietary for Internet Explorer I implement it through IECCSS (Internet Explorer Conditional Comments Style Sheet). Other browsers ignore it and even if spoofing occurs (with any browser) only IE itself will implement it.

- John

[SuzyUK]

Hi LucentPhoenix and Welcome to WebmasterWorld!

hmm.. it's a bugbear when something works wrongly in IE but it happens to be the behaviour you would like ;)

I do have a workaround but I'm not sure it's the best one I just rattled it up. Involves using a nested div and setting the background on the nested one, leaving it default to auto.

CSS:
div#scroll {
width: 280px;
height: 200px;
overflow: auto;
}
div.bg {
padding: 1px 0; /* take care for collapsing margins */
background: url(bgimage.gif);
}
p {margin: 20px 0;}

HTML
<div id="scroll">
<div class="bg">
<p>favourite foo text</p>
</div>
</div>

obviously sizes and margins can be adjusted to taste but because I used a <p> in my test it displayed a collapsing margin difference, which is what the 1px padding combats, depending on your bgimage that might not be a problem..

maybe someone else knows a better workaround?

Suzy

[LucentPhoenix]

IE-specific fixes aren't really what we're looking for. We'd like to come up with a standards-compliant workaround that will work in both IE6/IE7 and FF1/FF2.

SuzyUK: yeah, exactly... IE is giving us the results we want, but for the wrong reason :p

I'll try that code out tomorrow when I get back to work, and let you know if it'll do what we need, thanks.

[LucentPhoenix]

Ok, that fix did the job. Thank you very much for the help.