Image swap on input element - with CSS only

Opera 9 does not cooperate

[encyclo]

My markup is as follows:

<input type="image" name="BoutonsFormulaire:imgBtSuivantNA"
id="BoutonsFormulaire_imgBtSuivantNA" onclick="document.body.style.cursor='wait';" src="red.jpg" alt="Suivant"
border="0" />

To change the markup would require calling out the programmer - it's a .NET control and we don't have access to the code. We can't use Javascript either, CSS is our only route.

The problem is simple. We don't want to display "red.jpg", we want to display "green.jpg".

So I wrote this, basically a quick image replacement trick, nothing revolutionary:

input#BoutonsFormulaire_imgBtSuivantNA {
background:url(green.jpg) no-repeat top right;
padding-top:100px; /* padding to push the old image upwards */
overflow:hidden; /* then hide the overflow */
width:100px; /* width of image */
height:0; /* remove height of original image */
}

Assume for this test that both images are 100px by 100px one-color graphics.

This works in all the usual browsers (IE6, FF, Konqueror), but Opera 9.1 displays about 1 pixel of the original (red.jpg) image below the green one.

I've tried every combination of madding, margin, text-indent, line-height, but I just can't get rid of that vestige of the original graphic. Can anyone tell why Opera 9 is seemingly ignoring the

height:0;

and treating it as

height:1px;

instead? I obviously can't set a height of less than zero, so is there any way of pushing Opera into completely removing the one-pixel-high element?

[Marshall]

Can't you upload a green image and just call it "red.jpg" to over-write the file?

Marshall

[encyclo]

That would be too easy! ;) The answer is no, because red.jpg is used elsewhere.

A simpler summary to the above is that I have an input element with a height of zero. All browsers respect it apart from Opera, which gives it a height of 1px.

[Marshall]

I thought this was too obvious when I suggested it, but hey, it was worth a shot. Could it be a border problem? Maybe add border:none;

Marshall