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-26 11:00:29Z

2

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;
}

edited Feb 26, 2014 at 11:00

answered Feb 24, 2014 at 10:11

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GluePear Over a year ago

Brilliant, it works, thanks! I just had to add input:focus { outline-width: 0; } to remove the outline in Chrome. Thanks again.

Community · Accepted Answer · 2017-05-23 12:23:34Z

-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, 2017 at 12:23

CommunityBot

11 silver badge

answered Feb 24, 2014 at 10:01

Daksh Shah

3,1336 gold badges40 silver badges77 bronze badges

2 Comments

GluePear Over a year ago

I haven't used the button element.

Daksh Shah Over a year ago

@GluePear If you are not, why not try using it once? stackoverflow.com/questions/9376192/… ... what do you say.. ? Sorry i am not an advanced html programmer

Collectives™ on Stack Overflow

Submit input in IE8 not clickable

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related