I’ll update this later with more info about what I was actually trying to do, but for now, here is the bare facts

The initial problem was getting all browsers to support a transparent background image. Perfectly normal for “modern” browsers, but not so easy for our old “friend” Internet Explorer 6. Final solution I selected was to use a default style and then override it in IE6 and below with conditional comments.

In the head of the document

<style type="text/css">
.overview { background-image: url(./images/bg_overview.png); }
</style>
<!--[if lt IE 7.]>
<style type=”text/css”>
.overview {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’./images/bg_overview.png’);
}
</style>
<![endif]–>

Nice and easy, no stress, this works for IE browsers, as well as FireFox 1.5/2/3

But… I noticed in Safari that the background was now not showing..

A quick Google for “safari background-image” turned up thousands of results, but mostly irrelevant to my particular case. A chat with a couple of developers also turned up nothing, they’d never heard of this problem. Then, thanks to Carlos, he found the solution, this is apparently a known Safari bug and solvable by setting the background image in the style attribute of the element.

That would be great, except for the problem that I need a different style for IE <7

A quick bit of messing with the code and I found a solution involving javascript, a pure CSS solution would have been better, but until now I’ve not been able to find one. The final code I settled on is shown below.

<div class="overview" id="overview_1" style="background-image: url(./images/bg_overview.png);">
<!--[if lt IE 7.]>
<script type=”text/javascript”>
var ieFilter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’./images/bg_overview.png’)”;
document.getElementById(”overview_1″).style.backgroundImage = ‘none’;
document.getElementById(”overview_1″).style.filter = ieFilter;
</script>
<![endif]–>

This post was partly written to try and encourage me to start blogging again, partly because this is a problem I’m sure I’ll find time and time again. Saving it here will hopefully save me hours of time in the future trying to remember which site had a similar problem, and where the file is! But mostly to put something back into the community, theres been countless other blogs and sites where I’ve learnt about CSS bugs, and solutions, this is my turn to repay that kindness everyone else has shown.