padding a text input in IE... possible?

Question

I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.

In fact... It doesn't seem like padding on text inputs works at all in IE.

They have the following code


<style type="text/css">
#mainPageSearch input {
    width: 162px;
    padding: 2px 20px 2px 2px;
    margin: 0;
    font-size: 12px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
    border-color:#C6C6C6 #C6C6C6 #E3E3E3;
    border-style:solid;
    border-width:1px;
    color:#666666;
}
#mainPageSearch {
    margin-bottom: 10px;
    position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
    display: block;
    position: absolute;
    top:0px;
    right: -2px;
    text-indent: -2000em;
    height: 22px;
    width: 22px;
    background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>


<form id="mainPageSearch" action="">
    <input type="text"/>
    <a id="mainPageSearchButton" href="#">Search</a>
</form>

Is what I'm trying to do possible or should I just suck it up and deal with the text going under the search button?

I know I could make a search box with a transparent background/border and draw the styling using a containing div... but that isn't really an option because of how many places I've have to change it on the site.

Maybe I'll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?

edit: sorry I should have included the doctype... here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

also, The problems I'm having are in IE 7

score 65 · Accepted Answer · answered Dec 15 '09 at 23:12

65

try using line-height

answered Dec 15 '09 at 23:12

chris

674
6
2

I eventually came across this possibility but, your answer for sure deserves an upvote :) – Jiaaro Dec 16 '09 at 14:03
Hmm....this seems to work pretty well cross browser and is the best solution I've seen so far. It does however make the size of the cursor different in Chrome and IE (slightly off centered, or taller) which is mildly annoying. – Brian Armstrong Aug 21 '10 at 18:57
Mildly annoying == not to spec. I think I'll use Filip's hack. – Benjamin Atkin Oct 31 '11 at 23:52
1

What is mildly annoying is IE, and no.. IE doesn't care about specs (wait did I say IE is mildly annoying?? understatement of the year!!) – Tyler Jun 06 '12 at 21:39
2

In which element do I put the line-height? My text is still going under the button. (I applied it to the text input. BTW, my button is a submit input element.) – Carlos Garcia Mar 18 '14 at 19:12
1

> "try using line-height" How? Should offer a better explanation with specific guidance of how `line-height` might help OP with their problem. – KhalilRavanna Apr 03 '15 at 23:23
Line-height did not work for my problem, as the size of the box was uneven across browsers, not the position of the text. Had to use the good ol' "height". It passed my "cross-browser test" perfectly (Firefox39, Edge20, Chrome44, IE11). – Bernard Saucier Aug 21 '15 at 22:29

score 10 · Answer 2 · edited Feb 04 '16 at 09:47

10

I had this issue also i solved it by adding the following line

input 
{
    overflow:visible;
    padding:5px;
}

hope this helps? Let me know.

edited Feb 04 '16 at 09:47

Raptor

53,206
45
230
366

answered Mar 18 '11 at 22:26

Armen Kesablyan

101
1
2

David D · Answer 3 · 2017-05-05T13:17:12.490

Make your input transparent and place styles inside a container div:

http://jsfiddle.net/LRWWH/211/

HTML

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

CSS

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }

score 4 · Answer 4 · edited Oct 11 '17 at 22:50

4

There is a css only fix for it

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

Thanks Muhammad Atif Chughtai

edited Oct 11 '17 at 22:50

David R Tribble

11,918
5
42
52

answered Mar 14 '13 at 11:59

user2169658

41
2

This is the only code-provided answer that works in old IE. – Raptor Feb 04 '16 at 09:49

score 4 · Answer 5 · edited Feb 04 '16 at 15:56

4

Try border-right instead of padding-right. This worked for me.

edited Feb 04 '16 at 15:56

Michael Eakins

4,149
3
35
54

answered Jun 24 '11 at 11:45

Olli

41
1

If you want a background image to show through the border, make sure the border style is not "solid". – Dan Cecile Feb 11 '12 at 16:30

score 3 · Answer 6 · answered Mar 03 '09 at 16:56

3

You'll have to use float: left/right on '#mainPageSearch input' before you can apply padding/margin.

answered Mar 03 '09 at 16:56

Filip Dupanović

32,650
13
84
114

sorry to give it and then take it away... after applying it to the site (not my test file) it makes the button disappear – Jiaaro Mar 03 '09 at 17:15

score 1 · Answer 7 · answered Jul 28 '10 at 22:39

1

I experienced a similar problem - IE was padding the input field, but not making it bigger, thus pushing the text down inside of it. I fixed it by setting the height of the input as well. Try that.

answered Jul 28 '10 at 22:39

Shane N

1,742
2
17
24

score 0 · Answer 8 · answered May 27 '13 at 11:08

What about declaring DOCTYPE?

By adding <!DOCTYPE html> padding works grand for me in IE8. Take the following code as an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>

score 0 · Answer 9 · answered Mar 03 '09 at 16:57

0

I have the following working in IE7. What version are you targeting?

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />

answered Mar 03 '09 at 16:57

Nick Allen

11,970
11
45
58

3

I really only want padding on the right so that the text won't go under the little magnifying glass button that I have absolute positioned over the search bar – Jiaaro Mar 04 '09 at 15:35
try that for any you'll see that no padding is applied. – Filip Dupanović Aug 24 '09 at 12:40

padding a text input in IE... possible?

9 Answers9

Linked