Jul 01
Mysterious Yellow Form Field Color Problem
After I got my new theme up and running, some of you noticed some problems within the comments section of the site. Namely, the input text box for your e-mail address would be yellow – Which is a big problem when the text color for the box is white. First pointed out to me by Beth over at the Eclectic Studio Cafe, I immediately went to work trying to find the style definition that was causing the holdup.Now this proved to be a headache in itself because there’s like 3 style sheets that are in my theme and I couldn’t immediately find the problem area. I then used my good ol’ FF Web Developer Toolbar to try and get to the heart of the matter. Still no dice. At this point I wasn’t much in the mood for playing around so I just set up an inline style on the text box of “background-color : black;” To my disappointment and amazement, this STILL didn’t fix the problem! So I just said, “screw it”, and I added “color : black;” to the inline and now at least I could see the e-mail address.At this point, I went on my merry way trying to address some other things that needed addressing when Mark and Grace both said through comments that the e-mail address field was completely black! (Black text on black background). I read this, leaned back in my chair and said, “You got to be kidding me!” And then it donned on me that it was maybe an IE vs Firefox issue. I got to work on this, and lo and behold, it was black on black in IE, but black on yellow in FF. But this really didn’t make any sense to me. This meant that in IE, it was applying both rules of my inline style sheet and in FF it was only applying one. Logic says that there’s no reason that FF could only apply one. I mean, I know both inline style rules were good, (as evident by IE), so what was the deal? Time to do some digging. I pulled up Google and searched for “mysterious yellow boxes on form”.And I found my answer.
Thanks to the good people over at HTML Dog, I discovered what the problem was…The Google Toolbar!!! Can you believe that? The reason why the input box was showing up as yellow was because the Google Toolbar was automatically highlighting it, indicating that I could use AutoFill to fill it in! Wow. The thing is, it highlights boxes all the time but more often than not, we’re looking at pages with black text and white backgrounds so a little yellow isn’t a problem (or noticable). In my case though, white text on a yellow background is a BIG problem. And this is why I was seeing the problem only in FF and not IE – I don’t have the Google Toolbar on IE.
So after I found out what the problem was, I needed to fix it, and thankfully it wasn’t too hard. All I had to do was change the text “Name” to “Your Name” on my comments and problem solved. Confused? Immediately that didn’t make sense to me either. (Why would changing the text associated with the first text box solve the yellow problem on the second). The thing is – For my comments section, the text that identifies each text box comes after the text box, not before which is what the Google Toolbar expects! So it would see “Name” and say, “The next text box should be highlighted” when it really should’ve been the first. Problem solved!
*whew* That was a long post for such a little problem huh? Well, in case YOU see it later, now you’ll know what’s going on. And thanks again to everyone who gave me a heads up on this situation!
July 1st, 2007 at 7:45 am
Wow, great research. I don’t know if I would have ever gotten that far.
But that field is no longer a problem!
July 1st, 2007 at 8:02 am
I got the confirmation! NICE!
July 1st, 2007 at 8:38 am
Glad you got it fixed! How long did it take?
I’m just curious.
July 1st, 2007 at 12:16 pm
Um…probably a little over a solid hour. I had did some preliminary tests before, but when I actually sat down and said, “I’m gonna fix this now”, probably an hour.
It sucked. (#):)
July 1st, 2007 at 9:22 pm
I too saw it and knew it was because of Google Toolbar. Anyway its good that you have fixed it.
July 2nd, 2007 at 1:47 pm
I guessed it the very moment I saw the screenshot! Well, it actually gives headache. May be you can try using some other color.