Posted on April - 26 - 2011

IE visibility: hidden or display: none problem for submit button and an wise solution

I was creating a quick login form to place on the top left of a website I was building. The space was tiny for the form. And it was looking ugly with the submit button. So as I knew the enter button can submit a form, I left out the submit button. But without the submit button form couldn’t get submitted by pressing enter key!

Then I made a button like this:

<input type=’submit’ name=’submit’ style=’display:none’>

It didn’t work in IE7! I tried

<span style=’display:none’ >
<input type=’submit’ name=’submit’ >
</span>

then. It didn’t work either. I tried with CSS “visibility: hidden”, didn’t work either! I don’t know why microsoft did put this extra effort to cancel the default operation of the submit button if that’s not shown. I searched through internet, found a lot of keypress tracking thing with javascript solutions. But that’s not my way. So I made a cleaner solution:

<input type=’submit’ name=’submit’ style=’width:0px’>

LoL…there is always a backdoor ;) . Elegant, huh! Not yet…it has some positional problem! Here goes the fix:

<input type=’submit’ name=’submit’ style=’width:0px;height:0px; margin:0px; border:0px; background:green;position:absolute;top:-10px’>

« « How I wrote a shipping module for prestashop | Class oriented programming » »

Post a comment

*

Comment moderation is enabled. Your comment may take some time to appear.