12 Replies - 1337 Views - Last Post: 18 May 2009 - 02:09 PM Rate Topic: -----

#1 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Problem with insert button as image in IE

Post icon  Posted 11 May 2009 - 08:38 PM

hello,

i am having a problem with all of my form buttons in IE 6 & 7 (haven't tested in IE8 yet)...

i just changed my buttons from the standard button to an image.

i've read that IE does not read image form buttons and so far the only solutions i have been able to find involve javascript.

how can i use an image as my form buttons without using javascript? is it possible? thank you!

<input name="signUp" type="image" value="Sign Up" src="Images/buttonSignUp.png" />



Is This A Good Question/Topic? 0
  • +

Replies To: Problem with insert button as image in IE

#2 Chopster  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 134
  • Joined: 29-March 08

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 02:37 AM

Hey nine thousand feet,

try this, it works for me in IE8 (just upgraded) so not sure about IE 6+7 but i dont see why not.

<input type=image src=images/button_image.jpg onclick="what_ever_you_want_it_to_do"/>


Hope that works for you, as a side note it works in firefox and safari too :P

Enjoy!

This post has been edited by Chopster: 12 May 2009 - 02:37 AM

Was This Post Helpful? 0
  • +
  • -

#3 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 10:10 AM

Quote

onclick="what_ever_you_want_it_to_do"/>


could i make the onclick a value? or does this only work if i make the onclick another page within my site?

for example, an user fills in their login info and presses the login button (which is now an image)... and i only want it to proceed to the next page if the information is correct.

thanks chopster
Was This Post Helpful? 0
  • +
  • -

#4 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 10:58 AM

why not use CSS and add a class to the input?

<!-- IN CSS -->
.submit_button {
  background-image: url('myimage.jpeg');
  background-repeat: no-repeat;
  background-position: center center;
  height: 25px; <!-- height of your image -->
  width: 100px; <!-- width of your image -->
}



than use it in the html

<input class="submit_button" ....etc />



EDIT: wanna see it work? http://www.jandrtest...us.com/contact/
the submit and clear buttons are done using CSS and work in the form with no issues
Ill leave tha tlink here for a bit so you can see or look at the source code ( with firebug you can see the css )
IE6 looks offset but the image is still there for the button havent touched that site in a while :o haha

This post has been edited by RPGonzo: 12 May 2009 - 11:03 AM

Was This Post Helpful? 0
  • +
  • -

#5 Chopster  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 134
  • Joined: 29-March 08

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 11:01 AM

I could be wrong (more than likely), but i don't think you can put a value here, i am guessing something related to PHP. However you could use it to trigger such things as a javascript function to check data validation, or what i have been implementing is calling ajax functions so the page does not have to refresh.

Basically if its a php script to check login details i leave it blank, or do not include the (onclick) option at all.

I just state the page to it refers too when i created the form like so:

<form id="login" name="form1" method="post" action="login_validation.php">


or if i have validation on the same page, i leave the "action part" blank too, and then if the script runs successfully i send the user elsewhere by using the header function

example:

header(Location:log_them_in.php);


Hope that helps, if you need more i can post my login script that works to give you a better idea, let me know, good luck!

This post has been edited by Chopster: 12 May 2009 - 11:02 AM

Was This Post Helpful? 0
  • +
  • -

#6 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 01:46 PM

k, this is basically what i have for my login form. the login script was working in all browsers until i tried to make my input button an image, now it does not work in IE. do you know how i can get the input button to work in IE if i have it as an image?

<form id="form1" name="form1" method="POST" action="<?php $loginFormAction ?>">
	<table width="175" border="0" align="center" cellpadding="3" cellspacing="1" id="loginTable">
  <tr>
   <td><label for="username"></label><input name="username" type="text" class="formBoxLogin" id="username" value="bradley2083"size="22" /></td>
  </tr>
  <tr>
	<td><label for="password"></label><input name="password" type="password" class="formBoxLogin" id="password" size="22" /></td>
  </tr>
  <tr>
	<td><input name="doLogin" type="image" value="Login" src="Images/buttonLogin.png"/></td>
  </tr>
	</table>
	</form>


Was This Post Helpful? 0
  • +
  • -

#7 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 02:03 PM

Use CSS to "decorate" your input because for the form to work in IE properly the type needs to be submit.

Else you have to make a quick Javascript function and onclick="doSubmit()"

doSubmit() {
  form1.submit();
}



but then you run into the issue " What if my user has javascript disabled?? "
use CSS lol ... its a standard form and manipulating the display of your HTML and you can still stick with the type="submit so that the stupid IE browsers will know " HEY! im supposed to submit now! "


EDIT: Quick try but you can try this ... if you dont have a css sheet
<style type="text/css">
	.submit_button {
		background-image: url('Images/buttonLogin.png');
		background-repeat: no-repeat;
		background-position: center center;
		width: 100px; <!-- YOU NEED TO CHANGE THIS -->
		height: 25px; <!-- YOU NEED TO CHANGE THIS -->
	}
</style>

<form id="form1" name="form1" method="POST" action="<?php $loginFormAction ?>">
	<table width="175" border="0" align="center" cellpadding="3" cellspacing="1" id="loginTable">
  <tr>
   <td><label for="username"></label><input name="username" type="text" class="formBoxLogin" id="username" value="bradley2083"size="22" /></td>
  </tr>
  <tr>
	<td><label for="password"></label><input name="password" type="password" class="formBoxLogin" id="password" size="22" /></td>
  </tr>
  <tr>
	<td><input class="submit_button" name="doLogin" type="submit" value="Login"/></td>
  </tr>
	</table>
	</form>


This post has been edited by RPGonzo: 12 May 2009 - 02:26 PM

Was This Post Helpful? 0
  • +
  • -

#8 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Problem with insert button as image in IE

Posted 12 May 2009 - 06:07 PM

okay, so i went the CSS way as you suggested; however, IE just displays a gray outline of my image file... it is supposed to be a red and orange button with the text login inside. any suggestions on how to get IE to display the image?

thank you for helping me with this.

This post has been edited by ninethousandfeet@msn.com: 12 May 2009 - 06:30 PM

Was This Post Helpful? 0
  • +
  • -

#9 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Problem with insert button as image in IE

Posted 13 May 2009 - 06:02 AM

You can try just adding a border none to the CSS ,

<style type="text/css">
		.submit_button {
				background-image: url('Images/buttonLogin.png');
				background-repeat: no-repeat;
				background-position: center center;
				width: 100px; <!-- YOU NEED TO CHANGE THIS -->
				height: 25px; <!-- YOU NEED TO CHANGE THIS -->
				border: none;
		}
</style>


Was This Post Helpful? 0
  • +
  • -

#10 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: Problem with insert button as image in IE

Posted 13 May 2009 - 10:02 AM

i actually tried setting the border to none last night and still no luck. any other ideas?
Was This Post Helpful? 0
  • +
  • -

#11 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Problem with insert button as image in IE

Posted 13 May 2009 - 10:23 AM

Check your height and width or set a background-color: #000 and see if the gray turns to black ... if it does that your measurements are off somehow
Was This Post Helpful? 0
  • +
  • -

#12 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 3001
  • View blog
  • Posts: 10,393
  • Joined: 08-August 08

Re: Problem with insert button as image in IE

Posted 18 May 2009 - 02:04 PM

John Gruber is a love'm or hate'm kind of guy, but even if you hate him, you've got to respect his attitude towards IE:

http://daringfireball.net/colophon/

Quote

WEB STANDARDS

Web standards are important, and Daring Fireball adheres to them. Specifically, Daring Fireballís HTML markup should validate as either HTML 5 or XHTML 4.01 Transitional, its layout is constructed using valid CSS, and its syndicated feed is valid Atom.

If Daring Fireball looks goofy in your browser, youíre likely using a shitty browser that doesnít support web standards. Internet Explorer, Iím looking in your direction. If you complain about this, I will laugh at you, because I do not care. If, however, you are using a modern, standards-compliant browser and have trouble viewing or reading Daring Fireball, please do let me know.

Was This Post Helpful? 0
  • +
  • -

#13 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 151
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: Problem with insert button as image in IE

Posted 18 May 2009 - 02:09 PM

Thats Pro ... :D
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1