IE6 span + input bg-image bug?

[jlizarraga]

(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:


<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:



.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:


<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:


.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.