IE7 adds 1px offeset to static text input

[RRH]

Hello,


http://www.lukaszkarolak.pl - take a look at top right corner (search engine).


#search is displayed as a block and static (even hard-coded) element but IE7 adds its 1px as top.

When I set position: absolute and top: 0 to #search and width of 148px to p:first-child it was OK.

What gives? I couldn't find any description of this bug.

[RRH]

OK, I've found where is the problem.
Here: http://www.quirksmode.org/bugreports...ed_margin.html

IEs add 1px of margin (in IE8 firebug displayed as a offset [top]). So, solution is simple: margin: -1px

[Paul O'B]

If you float the input then the gap disappears (and so do whitespace bugs) and no hacks needed.

#search {
    border: 0;
    color: #808080;
    display: block;
    font-style: italic;
    height: 19px;
    padding: 0;
    width: 148px;
    float:left
}

Of course you cant always float inputs but where feasible and in tight pixel critical situations it is a more robust method.

[RRH]

You're right. Float is better than applying the IE7 hack as I did. Must change that.

thanks