jQuery button display in IE6

We have some HTML开发者_开发问答 buttons which we format using JQuery - $('#button').button().

Works great but.. when the page first loads in IE6 you see the "unformatted" regular HTML button and then you see the JQuery formatting kick in a split second or so afterwards.

What can you do do avoid displaying the default HTML button and just display the JQuery formatted version?

Put it in a div which by default it hidden CSS: #hiddenDiv {display: none;} and then after you perform all of the styling on the button using jQuery unhide the div $('#hiddenDiv').show()

Edit: To allow the button to be displayed when javascript is disabled:

<noscript>
    <style>
        #hiddenDiv
            {
            display: block!important;
            }
    </style>
</noscript>

Important: This will invalidate your HTML, as style tags are not allowed in noscript elements, and in XHTML noscript tags are not allowed in the head element.

Try this out. In your CSS code, write

#button{
visibility: hidden
}

Put this code inside

<!--[if IE 6]>
<![endif]-->

And in your $(document).ready function, add the following.

("#button").css("visibility","visible");

Screw them if they use IE6 and disable Javascript. :P