CODEWITHSUNDEEP
htmlcssinternet-explorer-8
GluePear
GluePear

Reputation: 7715

Submit input in IE8 not clickable

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

Upvotes: 0

Views: 435

Answers (2)

Asons
Asons

Reputation: 87191

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

Upvotes: 2

Daksh Shah
Daksh Shah

Reputation: 3113

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

Upvotes: -1

Related Questions