CODEWITHSUNDEEP
htmlinternet-explorerpaddingtextinput
Jiaaro
Jiaaro

Reputation: 76988

padding a text input in IE... possible?

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

Upvotes: 22

Views: 59793

Answers (9)

user2169658
user2169658

Reputation: 41

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

Upvotes: 4

David D
David D

Reputation: 1295

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

Upvotes: 4

Olli
Olli

Reputation: 41

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

Upvotes: 4

Armen Kesablyan
Armen Kesablyan

Reputation: 101

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

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

hope this helps? Let me know.

Upvotes: 10

German Latorre
German Latorre

Reputation: 11158

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>

Upvotes: 0

Shane N
Shane N

Reputation: 1741

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.

Upvotes: 1

chris
chris

Reputation: 674

try using line-height

Upvotes: 65

Nick Allen
Nick Allen

Reputation: 12230

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" />

Upvotes: 0

Filip Dupanović
Filip Dupanović

Reputation: 33700

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

Upvotes: 3

Related Questions