SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Exclamation BG images scroll in MSIE6

    I like using background images to style input textfields. This works fine for Firefox, but in MSIE 6, as you keep typing, the BACKGROUND actually begins to scroll to the left (no scroll bars appear, it just moves away)

    This is opposed to how Firefox does it (correctly) where the BG image stays fixed and the text scrolls to the left and "off screen".

    Is there a simple fix for this in IE?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If its what i'm thinking then simply apply the image to the right instead.

  3. #3
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You mean like:

    Code CSS:
     input.searchBox {
    background: url('../images/search_bg.gif') top right no-repeat;
    }

    Like that? Because I tried it and it doesn't work as intended. Here's my actual current code on the input field:

    Code CSS:
     input.searchField {
        background: url('../images/search_field_bg.gif') top right no-repeat;
        width: 187px;
        height: 17px;
        color: #999;
        padding: 6px 15px;
        _width: 217px;
        _height: 29px;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I was assuming you had a repeated image.

    I'll need to see the page to see exactly what you mean but if the problem is only IE6 then you can do something like this.

    Code:
    input.searchField {background-attachment:fixed}
    It's probably best if you have a link so I can see for myself

  5. #5
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, that background-attachment:fixed solution fixed IE!

    It now stays put when I add enough text to normally cause the text to "disappear" to the left. The BG is now staying in place rather than moving. Thanks Paul!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Remember to give it only to ie6 and under though.

    Code:
    * html input.search{etc....}

  7. #7
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, so use * html instead of the _ hack, eh? Ok. I'll make a note in my CSS to ensure that I'm using that instead. 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
  •