CSS Text Input Weirdness

OK – so here is my first tech post, which of course centers around a frustration while creating my pink blog. As usual, I was previewing my code in Mozilla, and my “Comments” page looked very lovely and pink. Then, as usual, I held my breath and previewed my code in IE, and my lovely pink goodness was interrupted by a *yellow* text input!

“Unacceptable!” I said, at approximately midnight one night. So, I searched and I searched to see if I could find a work-around to the problem and came up with nothing. Then, for kicks, I viewed some of my favorite CSS/tech sites (Eric Meyer, Position is Everything, and even my husband’s site) in IE, and indeed, they all had the same issue! At 2:00 a.m., I decided that if Eric Meyer could live with it, then so could I, but I’m definitely not happy about it.

The problem is rather hard to describe, but I’ll give it a shot. As you can see on my “Comments” page, there are multiple text inputs, one for Name, one for E-mail, and one for URI. It seemed at first that a yellow background color was showing up only on subsequent text inputs (as it appears now in IE). I tried rearranging them, and still got the same result: the first text input was the proper gray background, but subsequent text inputs were yellow. Tried putting them in a table, tried separating them with paragraph tags, tried rearranging the label tags – all to no avail. During the process, at some point or another, two of the text inputs showed yellow, while one was always correct, though not always the same one (or in the same order). So my theory that this issue was occurring in subsequent text inputs was inaccurate, as it did occur in other arrangements, with one text input always being correct, while the others were yellow. Anyway, I tried many, many more things – mostly re-ordering the text inputs, adding more inputs to see what happened, isolating or separating with whatever tags I could think of, but still the same general problem: yellow text inputs on a PINK site!

It’s enough to make even a techno-geek Southern woman want to pull out her dyed medium reddish-brown hair!

So to some of you more wise, and with more time on your hands, any ideas what’s up in IE? Any ideas on work-arounds?

16 thoughts on “CSS Text Input Weirdness

  • Pingback: geek ramblings » Digital Diva

  • Posted on April 26, 2006 at 1:10 am

    I’m looking at this in IE, looks fine to me, no yellow text boxes at all.

    Using IE 6.0.2900, XP Media Center Edition SP 2.

  • Posted on April 26, 2006 at 2:24 am

    welcome!!!!!!!! 🙂

  • Posted on April 26, 2006 at 5:40 am

    Susan, the Google toolbar often does this when it recognises a field that it can pre-fill for you. You may have this installed on IE, but not in Mozilla.

    If I’m right, do I win a prize?

  • Posted on April 26, 2006 at 8:19 am

    i’m with gerald. that was my first thought when you said yellow. no yellow fields on IE7 on XP MCE SP2.

    you could just try naming your fields something obscure (not name or email), so that google doesn’t recognize them.

  • Posted on April 26, 2006 at 9:02 am

    Hi there, and welcome to the blogging world! 🙂 As with everyone else, I’m viewing in IE (version 6, SP 2, though) as I type, and there’s nothing yellow on my end. All very pretty in pink.

    My thought was also the Google toolbar; however, I don’t have that awful form fill thing turned on, so I can’t tell you for sure. In any case, it would seem that all is well, and it looks perfect to me! 🙂

    Have a great day!

  • Posted on April 26, 2006 at 12:22 pm

    I adore MSIE so very very much that I wish I could marry it and file for divorce and collect alimony.

    Your blog looks simply mahvellous in Opera 8.54 XP Home. (I’m playing hooky at work.)

  • Posted on April 26, 2006 at 12:59 pm

    Hi Susan,

    It is the Google Toolbar. It happens because you have Autofill on. Turn it off and everything will look normal 🙂

    That is the very same reason you saw the yellow boxes on the other blogs.

  • Posted on April 26, 2006 at 1:46 pm

    Thanks everyone! Yes – it was the Google toolbar, which I had installed on IE, but not Mozilla. I hardly ever use IE, except to preview web sites that I’ve created, just to make sure there’s nothing too terribly weird. So, I didn’t even think to check my IE config – just assumed it was the CSS. (This is what happens when you get up at 5:30 a.m. and work on your CSS from midnight-2 a.m.).

    And while uninstalling the Google toolbar did “fix” the problem, I’m sure there are a lot of folks out there that have the Google toolbar installed (with autofill or other auto-preferences), and will still see yellow text inputs on not only mine but a variety of sites. I personally dislike auto-install or auto-preference type stuff, and I’m sure the Google toolbar auto-installed when I installed Google Talk.

    Sorry Gerard – don’t have any prizes. 🙁 I see you’re across the pond from me, but if you ever make it to Atlanta I can treat you to some fine Southern U.S. cuisine!

  • Posted on April 27, 2006 at 5:08 pm

    Soon as I can invent a reason to visit Atlanta, you can cook me up a treat, Suze!

    Glad to hear you got the problem sorted out anyway!

  • Posted on August 12, 2006 at 8:49 am

    Hi, your site is the best! I love your tips, thanks 🙂

  • Posted on February 21, 2007 at 2:25 pm

    Check this:
    background-color: #525152!important;

  • Posted on April 18, 2007 at 12:00 pm

    There’s no problem now… so I guess you found a solution.

  • Posted on January 23, 2008 at 8:07 am

    >> background-color: #525152!important;

    Does this help? Or disabling google toolbar is the only way to fix this problem?

  • Posted on August 28, 2008 at 5:31 pm

    What a life-saver this blog post and comments were! Thank you!

  • Posted on July 1, 2009 at 9:10 am

    You MUST use the !important tag to kill the yellow.

    EXAMPLE:
    background-color:red !important;

    This will override Google, sorry for the late entry but I have just came upon this post in the SERPs.

Leave a Reply

Your email address will not be published. Required fields are marked *