[Solved] CSS form won't submit in IE7

[owlinargyle]

I’m new to designing to cross-browser compatibility; so I’m a little frustrated.

I have a Login form with a stylized submit button. When the form is displayed in an IE6 or IE7 browser, the form will not submit. However, the form submits perfectly in IE9, IE10, Chrome, Firefox, even Safari.

I suspect that IE7 doesn’t recognize the Input button correctly. I have it defined as a Class in the Form, but the Type isn’t actually defined in the CSS. That doesn’t seem to be a requirement for the other browsers. I’m getting conflicting information when I research this and confusing myself. Does anyone have insight?

This is my codepen

If someone could take a look, I’d really appreciate it! Thanks!

[alexmccabe]

CSS won’t block a button from submitting unless it happens to be hidden underneath another element. Try removing all the styles from the form to see if it submits and works then.

If it doesn’t then you clearly have a non-CSS coding problem.

Also, the form will NOT submit on CodePen. All form submit requests are blocked there.

As well as this, try using the more standard <input type="submit"/> for the button instead of <button>. This won’t change the way the code works, it is just better practice.

[owlinargyle]

I know that Codepen won’t let you submit a form. I was just providing the code so you could see it.

I’ll try the input instead of button.

[paulob]

I believe IE7 needs a type=”submit” on the button element or it won’t submit. You seem to have a type of type=”submitButton” which I don’t think is a valid type attribute value.

However as mentioned above you can style a normal input type=submit button to look like what you want anyway and sidestep the issue altogether.:)

[owlinargyle]

I changed it to input instead of button, and it resolved the issue. I didn’t realize that a type of button in a form wasn’t recognized by all browsers. Lesson learned.

[Author]

Posts