Submit input in IE8 not clickable

Question

I have a form whose submit input button has a background-image and is shifted left over the top of the input field:

enter image description here

This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?

HTML:

<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>

CSS:

#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}

input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}

Asons · Accepted Answer · 2014-02-26T11:00:29.647

This is a start: (demo: http://jsfiddle.net/KYL3A/)

I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8

<form id="" action="" method="post">
    <div id="searchwrap">    
        <label for="search">Search</label>
        <input type="text" id="search" name="search" value="" />
        <input type="submit" name="searchsub" class="searchsub" value="" />
    </div>
</form>

CSS

#searchwrap {
    display: inline-block;
    border: 1px solid #333;
    padding: 0 10px;
}
#search {
    width:150px;
    height:36px;
    border:0;
}

input.searchsub {
    width:23px;
    height:23px;
    background:red url();   // added red as i dont have your image
    margin:8px 0 0 0px;
    cursor:pointer;
}

Brilliant, it works, thanks! I just had to add `input:focus { outline-width: 0; }` to remove the outline in Chrome. Thanks again. — GluePear, Feb 26 '14 at 11:16

score -1 · Answer 2 · edited May 23 '17 at 12:23

-1

If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.

Source: The first answer on this page and this source

edited May 23 '17 at 12:23

Community

1
1

answered Feb 24 '14 at 10:01

Daksh Shah

2,997
6
37
71

I haven't used the button element. – GluePear Feb 24 '14 at 10:10
@GluePear If you are not, why not try using it once? http://stackoverflow.com/questions/9376192/add-icon-to-submit-button-in-twitter-bootstrap-2 ... what do you say.. ? Sorry i am not an advanced html programmer – Daksh Shah Feb 24 '14 at 16:53

Submit input in IE8 not clickable

2 Answers2