0

I have a page at ---link removed now---

You can check it in FF and IE (I have IE 9). In it you can see that the search box at the top right is having a padding (left:32px and right:72px). The padding works correctly in FF and Chrome but not in IE.

What can be the possible reason.

Search box code- 

<form action="">
    <input type="text" name="search" id="search" />
    <input type="submit" id="button" value="" />
    </form>

CSS: 

#search {
    background:url(images/searchlens.jpg) no-repeat 0 0;
    float:right;
    width: 286px;
    height:40px;
    border:none;
    padding-left: 32px;
    padding-right:72px; 
}
Puneet Saini
  • 597
  • 1
  • 7
  • 12

1 Answers1

0

I think you mean that when there is sufficient text in the box, right padding is not applied and as more text is entered, even left padding vanishes. This can be observed in the following simple document:

<!doctype html>
<title>input padding</title>
<style>
#search {
    padding-left: 32px;
    padding-right: 72px;
    width: 286px;
}
</style>
<input id=search value=
"Hello cruel world of Internet Explorer, why don't I get padded as specified?">

If more characters are typed into the box, even the left padding goes away.

There does not seem to be any good fix to this oddity. In answers to question padding a text input in IE… possible?, several fixes have been suggested, and they presumably help in some cases, but not my tests.

So I would suggest circumventing the problem by wrapping the input element inside a div element and setting the background and padding on the div element, so that the input box inside it is mostly unstyled and all scrolling takes place inside it.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I tried the link in your answer but I couldn't get that code to work after trying all the hacks in the answers, but people reported that it worked for them... – Puneet Saini Jan 27 '12 at 02:58