The Thögosphere

Most of us are custom to make small workarounds for Internet Explorer 6, and I’ve previously announced that I have dropped supporting IE6 (mostly) when developing websites. But what do you do when modern browsers such as Firefox, Safari and Opera disagree on how to render CSS correctly?

Case: Apilot.no - Multiple backgrounds

Apilot.no is the product site for one of my current (and neverending) projects, Apilot (which is an easy-to-use CMS, made for easily implementing any kind of design).

Originally the background consisted of two different images. A gradient image, the sky, which was repeated x in body, and the clouds which was centered in a wrapper-DIV (body_wrapper).

The first challenge I encountered was to remove white-space below the site since the background was way higher than the actual site. This was fixed with a relatively easy hack:

#body_wrapper {
background: url(/media/images/bg_clouds.jpg) top center no-repeat;
position: absolute;
width: 100%; height: 100%;
}

This worked, but as soon as you resized the window and scrolled down, the wrapper background was cut off.

Alright, so let’s try a different approach. I googled around a bit and found this hack. It appears that most browsers will recognize the background-attribute in the html-selector. Unfortunately, that didn’t work too well either. Apparently that will make the body collapse to the site height, and no longer the browser window.

Well then. I can’t think of more ways to make this work in an elegant manner, and I’m ashamed to come up with this solution (which actually works in every browser, except for some minor issues with Safari on iPhone).

I can’t wait for CSS3 to become standard, with goodies like multiple backgrounds. If anyone have any solutions to this quite annoying issue, please let me know :-)