Firefox 2 - HTML button is just solid grey. All other browsers fine: wtf?

Question

Hello all,

I have a site that has a simple HTML button in a form. All browsers show this button correctly. However, in Firefox 2 and Seamonkey it appears just as a solid grey square that cannot be clicked on and that has no text.

<input id="getaudiobutton" type="button" value="Get Audio" onclick="convert()" />

For those of you that have Firefox version 2 or Seamonkey, please see my site

Thanks all

SOLVED

No idea why but what I did was increase the size of the div holding the button so that the button can be shown fully. There wasn't enough space for the button to be clicked. Firefox 2 and Seamonkey managed to find this a bit troublesome.

Thank you all for your help. :)

Answer 1

From what I can see just by viewing it in Seamonkey and looking at the contents of the page and your CSS, you may want to check the style for the div that the button is contained in. I can see the button in Seamoney, but it is cut off at the very top, only allowing about 1-3 pixels to show. I can click it as well.

My guess would be that since you are setting a static height of 34px for the style that is applied to the parent div of the button, it is cutting off most of the button.

Answer 2

Are you sure JS is enabled on your copy of Firefox?

Do you really have to worry about FireFox 2? It also only has a 3% market share:

http://marketshare.hitslink.com/report.aspx?qprid=0

Answer 3

DO you need a type="submit", instead of type="Button"?

Answer 4

I observe the same behavior as s13james (+1 for that) but have some more things I want to point out.

You may want to rethink your use of line-height and height there, as the wrapping of that input element to the next line with the combination of those values has a lot to do with your trouble.

I see you're applying the same style via id and class, however that style is declared only for use as a class:

div.w_span_auto{
    background:url(../images/wr.png) top right no-repeat; 
    padding-right:18px;
    height:34px;
    line-height:34px;
    text-align:left;
    border:none;
    }

(For an id, you'd need to have declared it as div#w_span_auto.)

I'm not sure why you're declaring it twice either. There's an identical declaration later in the same css file.

Cheers.