IE7 adds 1px offeset to static text input

HTML & CSS
1

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. :frowning:

2

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

thanks :slight_smile:

3

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


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

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

4

OK, I’ve found where is the problem.
Here: http://www.quirksmode.org/bugreports/archives/2005/10/IE6_input_field_topbottom_unwanted_margin.html

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

:slight_smile: