jQuery button display in IE6

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.

Answer 2

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