April 25, 2012

Input fieldset with border-radius and shadow not showing all text in IE9

Question by Hommer Smith

I have the following css:

fieldset ul li input {
  width: 96%;
  margin: 0;
  padding: 6px;
  font-size: 13px;
  border: 1px solid #CCC;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  -webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
  box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}

Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can’t see it completely. As you can see is hidden in the half of it:

IE9 fieldset input problem

Answer by Starx

Either increase the height or the padding.

input {
    padding: 10px;
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!