Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

This button is before CSS Sprites

<input type="image" src="/images/search-button.png" value="" id="search-button">

I'm trying to implement CSS Sprites with one of my search form and the problem is that if I use 

<input id="search-button" class="sprites1" type="submit" value="">

it will look something like this.

enter image description here

As you can see the image on the right doesn't look right, but it is click-able.

Then I tried with 

<span id="search-button" class="sprites1"></span>

enter image description here

Then it looks right! But!! I can't click on it.

So here is my CSS sprites code.

What I have to implement to get it look the one I want and I can click on it?

 .sprites1 {
        background: url('result.png');
    }
#search-button {background-position: -0px -462px; 

                width:16px; height:16px; float:right; }
share|improve this question

1 Answer

up vote 1 down vote accepted

The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:

/*  reset css of buttons */
.cssresetbutton {
    border-width: 0px;
    border-style: none;
    background: inherit;
    font: inherit;
    color: blue;
    padding: 0px; }

.cssresetbutton:active {
    border-width: 0px;
    border-style: none;
    background: inherit;
    outline: 0;
    box-shadow: none; }

try adding the cssresetbutton class to your input element and see if it works.

EDIT: You can also try not using a input[type=submit] element. For example:

<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>

It will submit the form#formid element when clicked.

share|improve this answer
1  
are you inserting it BEFORE the sprites1 class? like class="cssresetbutton sprites1". It makes a difference. – FRD May 1 '12 at 21:54
1  
before, like this class="cssresetbutton sprites1". let me know if it works. – FRD May 1 '12 at 21:56
1  
Hmm... can you explain to me why the "background-position: -0px -462px;"? Why 462px? Can you try removing it (keeping the cssresetbutton class)? See if it changes anything? – FRD May 1 '12 at 22:00
1  
Try not using a input element. For example: <span id="search-button" class="sprites1" onClick="this.form.submit()"></span>. When you click it, it should work just as a input[type=submit] element, trying to submit the related form. See if that works. – FRD May 1 '12 at 22:06
1  
you mean that the cursor doesn't appear as that clicking hand (or something)? that's simple: add 'cursor: pointer' to the #search-button css. Or, inline: <span id="search-button" class="sprites1" onClick="this.form.submit()" style="cursor: pointer"></span> – FRD May 1 '12 at 22:10
show 9 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.