SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 adds 1px offeset to static text input

    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.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    If you float the input then the gap disappears (and so do whitespace bugs) and no hacks needed.

    Code:
    #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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right. Float is better than applying the IE7 hack as I did. Must change that.

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •