Input type error cross browser layout

[davelf]

Hi, i have problem with google chrome:
I make an input box for login, it should look like this one in FF:


But it appear like this in chrome, safari, & IE.7


This is input code:

<input type="image" class="login" onclick="javascript:ajaxpage('content/do-login.html', 'kolomlogin');"/>

This is the CSS:

.login {
	display: block;
	width: 67px;
	height: 32px;
	background: url('images/button/login.png') bottom;
}
.login:hover {
	background-position: 0 0;
}

And This is the Image:


So is there any problem with my css code?
Thank you for your attention

[Beverleyh]

What if you just add value="" to the login button input tag?

[davelf]

ya i already try that too, it's not work.

[davelf]

I used this line of code to cover it:

<a href="#" class="login" onclick="javascript:ajaxpage('content/do-login.html', 'kolomlogin');"></a>

i try this to :

<input type="file" class="login" onclick="javascript:ajaxpage('content/do-login.html', 'kolomlogin');"/>

but this doesn't work either.

is that mean that i can't use image for my button. Or like my first question, is there any problem the way i call the css sprite?

[djr33]

I believe that an image input uses the src attribute just like a regular img tag.
Try adding this to the tag:
src="yourimage.jpg"

I'm not sure how you can have the special styling and the image, but it should work to at least remove the default text.

[davelf]

the reasons that i using "class" instead direct "src" is the hover.
That's why i use css sprite too, hehe

So any other option

[jscheuer1]

djr33 is right. You need a src attribute. The reason it looks different in Firefox is that in Firefox, the broken image token isn't displayed as frequently (in less situations) as it is in other browsers. For what you are doing a transparent .gif image may be used. That way there should be no broken image token:

<input src="transparent_67_32.gif" type="image" class="login" onclick="javascript:ajaxpage('content/do-login.html', 'kolomlogin');"/>

For best results, make this transparent .gif conform to the dimensions:

.login {
	display: block;
	width: 67px;
	height: 32px;
	background: url('images/button/login.png') bottom;
}
.login:hover {
	background-position: 0 0;
}

Like:



It's there, you just can't see it. If you hover over it, you may right click and save it. Or use this link:

http://home.comcast.net/~jscheuer1/s...rent_67_32.gif

You still won't be able to see it. Or use this:

http://home.comcast.net/~jscheuer1/s...rent_67_32.htm

where I've put it in a div of the same dimensions and given the div a background color.

[jscheuer1]

Even better, use a button type input:

<input type="button" class="login" onclick="ajaxpage('content/do-login.html', 'kolomlogin');"/>

css:

.login {
	display: block;
	width: 67px;
	height: 32px;
	background: url('images/button/login.png') bottom;
	border-width: 0;
}
.login:hover {
	background-position: 0 0;
}

Notes:

• For the onclick event of an element, the prefix javascript: is not required.
  
  
• No transparent .gif is needed.
  
  
• Since no image is involved, display: block; could be removed, unless you need the line breaks.

[davelf]

ah i understand now that's what Daniel mean.

Thanks you so much John, it's perfect.