Tuesday, April 10, 2007

Hidden submit buttons and IE

Internet Explorer has this annoying bug that breaks submit-on-enter-key if the submit button is not visible during page load. Setting it to display:none and using position:absolute;left:-5000px both cause this bug to appear.

Here's one solution (assumes all submit buttons have a class="submit"):

<!--[if IE]>
<style type="text/css">
.submit {
 height:0;
 width:0;
 overflow:hidden;
}
</style>
<![endif]-->

This doesn't work in Firefox, so make sure you sniff for IE when applying this technique.

5 comments:

  1. Thanks.
    I have spend alot of time looking for somthing like this.

    If you use this for IE and "display: none;" in another class and then switch between em with Javascript when a user is from IE or Firefox you get the possibility of getting the hidden submit buttons for both browsers.

    Very nice, thanks again

    ReplyDelete
  2. This works in firefox and internet explorer. Can someone confirm that it works elsewhere?

    input.submit {
    width:0;
    height:0;
    border:0;
    background-color:inherit;
    overflow:hidden;
    }

    ReplyDelete
  3. Bravo, what phrase..., a magnificent idea [url=http://cgi2.ebay.fr/eBayISAPI.dll?ViewUserPage&userid=acheter_levitra_ici_1euro&achat-levitra]levitra en ligne[/url] I consider, that you commit an error. Let's discuss it. Write to me in PM, we will communicate.

    ReplyDelete
  4. This show a little submit dot even thought width and height is set to 0.
    Adding "border:0;" to style helped to hide it completely. Thanks Mike Stop Continues.

    Tested on and works on IE8, Chrome v14, Firefox v6, Opera v11.

    ReplyDelete