« Scrollbar styling
How to use the EM unit in CSS »

Internet explorer hidden input border

This might be a rant :-) Its a enoying behavour IE have.

On input boxes, IE 6 makes some hidden border/margin or something on the top and bottom. I will show you:

In IE:

In Firefox:

I made this example with the following HTML:
<div style="width:200px;border:1px solid #000;"><input style="height:10px;"></div>
You would think the input would be 10 pixel high and the div 12 pixel. But in IE the div is 14 pixel high.

Its a good thingy to know, when designing around an input box. This has mostly been a problem when designing cool search boxes.

I can only ask one thing, why oh why?

This entry was posted on Friday, April 25th, 2008 at 8:33 am and is filed under Web articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Internet explorer hidden input border”

  1. mroldwang Says:
    June 27th, 2008 at 4:53 am

    set text input box border=”0″
    not none will solve this problem.

  2. Rasmus Keil Says:
    June 27th, 2008 at 9:38 am

    In not sure what you mean.
    If its:
    then its not working.

  3. php developper Says:
    August 12th, 2009 at 7:31 pm

    Check below code.. it will work with IE and Mozilla..

    #disp {
    border:0px;
    background-color: transparent;
    }

  4. Rasmus Keil Says:
    August 13th, 2009 at 7:27 am

    #php developper

    I tried the css code on my example. The div is still 14 px high, not 12. So it doesnt work.
    Testet in IE7

    <div style="width:200px;border:1px solid #000;"><input style="height:10px;border:0px;background:transparent;"></div>

Leave a Reply