Question

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?

Answer 1

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.