(I know :hover doesn't work in IE6 except for <a>. I'm not worried about the rollover effect not working - in this case the background image just doesn't show up at all)

I've come across a very strange IE6 bug that maybe one of you gurus can shed some light on. IE7 doesn't have this problem.

I'm using a sliding door button to submit a form:

Code:
<span id="bh_HomepageButtonsSubmit" class="bh_HomepageButton"><input type="image" src="/images/blank.gif" alt="Submit" onSubmit="check_form()" /></span>
The following styles are applied:

Code:
.bh_HomepageButton {
	display: block;
}

#bh_HomepageButtonsSubmit {
	background-image: url(/images/homepage_buttons_submit.png);
}

.bh_HomepageButton:hover {
	background-position: 0px 36px;
}

#bh_HomepageButtonsSubmit {
	width: 97px;
	height: 36px;
	margin: 0 auto;
	margin-top: 3px;
}

#bh_HomepageButtonsSubmit input {
	width: 97px;
	height: 36px;
}
In IE6, this fails. The submit image shows up properly sized and clickable (calling the check_form function and submitting the form and all), but the background image is nowhere to be found. After creating a test case and narrowing it down, I found that adding a container with a blank css definition for the span it contains fixes the problem, like so:

Code:
<div class="bh_SubmitWrapper">
                    <span id="bh_HomepageButtonsSubmit" class="bh_HomepageButton"><input type="image" src="/images/blank.gif" alt="Submit" onSubmit="check_form()" /></span>
                </div>
The CSS for bh_SubmitWrapper:

Code:
.bh_SubmitWrapper span {
	/* lolwut */
}
Removing this definition from the CSS causes the background-image to once again disappear.

I've got this fixed with the dummy wrapper, but I'd like to know more about this bug/what triggers it/how to avoid it. Never seen something like this! Weirdest IE6 bug I've encountered since I pulled my hair out over the float/html comment bug.