Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: incrediBILL

Message Too Old, No Replies

Browser compatibility issue with submit button

submit button error in firefox and IE

     
6:53 pm on May 14, 2013 (gmt 0)

5+ Year Member



Originally I had posted this to the PHP section, but just found out it isn't PHP related.

On this login script, I wanted to use an image for the submit button. I put the following in:

<input name="doLogin" type="image" src="login-btn.png" style="margin-left:90px;" id="doLogin3" value="Login">


This works in Chrome and Safari, but not Firefox or Internet Explorer.
When I change it to this, it works on all browsers.

<input name="doLogin" type="submit" style="margin-left:90px;" id="doLogin3" value="Login">


Any suggestions are appreciated thanks!
9:34 pm on May 14, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Well, it's either image or submit. One type or the other. I think the usual copout involves a transparent button combined with a background image.
4:20 am on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@lucy24, no, input type "image" is designed to act as a submit button.
@reffik024, I'm curious, what exactly do you mean by "doesn't work"? Can you create a very minimal test case that demonstrates it?
4:53 am on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



###. Forgot that detail. (I have a similar mental block on "reset". Most recently it went astray the day before yesterday.)
8:40 am on May 15, 2013 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First things first: what doctype and is your code validated without any complaints ?
8:07 pm on May 16, 2013 (gmt 0)

5+ Year Member



Doctype set as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When I say "doesn't work" I mean when I click on it, the form does not submit.
8:31 pm on May 16, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Here's a base case which works for me in all browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Test</title></head>
<body>
<div>
<form action="#">
<div>
<input name="doLogin" type="image" src="http://www.webmasterworld.com/gfx/logo.png"
style="margin-left:90px;" id="doLogin3" value="Login">
</div>
</form>
</div>
</body>
</html>

[edited by: tedster at 2:30 am (utc) on May 17, 2013]
[edit reason] add line breaks - prevent side scroll [/edit]

8:32 pm on May 16, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Does that work for you? If so, then you'll probably need to whittle down your own code to figure out what is preventing it from working.
8:40 pm on May 16, 2013 (gmt 0)

5+ Year Member



Just tried that, does not work for me. For some reason it won't work unless type="submit"
8:49 pm on May 16, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Hmm. That's bizarre. Could you maybe have some browser plugin/toolbar that's preventing the default browser behavior? What version of IE and Firefox?
4:16 pm on May 17, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Pet peeve:

The last time anyone should use that doctype for new web pages was 1999. Quit using it. Use this one:

<!DOCTYPE html>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month