CSS issues
- Started
- Last post
- 31 Responses
- leftwave
hi all,
i made a page that uses CSS to define the background color of some form fields. they should be dark red.
look here:
http://www.neuroblast.net/EI/con…
for some strange reason, my client is saying that they turn yellow in their version of internet explorer. what color are they for you? any idea how i can make the stylesheet work properly so they don't turn yellow? here's a screenshot of the yellow ones from my client:
help, please :)
- jevad0
welcome to the wonderful world of coding cross-browser CSS
what version of IE is he running and whats the code you are using?
- grafholic0
tried with a few IE versions:
IE6 with XP:
initially all fields displayed with bgcolor in dark red. then name, email, and phone fields turned light yellow.IE5 with W2K:
all red and stays red.looks like css hacking is on its way?
- gabriel_pc0
that's an autofill option for IE. It makes form fields that have common names (ie..firstname, password, etc...) that yellow color. don't believe there's any way to control for that.
- grafholic0
ah right, forgot i had those google tool bar.
- leftwave0
oops, here's the code, is there *anything* i can do to fix this? or is there an alternate (non-CSS) way to make the form fields colored??
.form {
background-color: #5C0505;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 1px solid #000000;}
- leftwave0
gabriel, if that is an autofill feature for IE, is there any way around that? could i just rename the fields to non-standard things like instead of name, eman?
- gabriel_pc0
that's what I would recommend. something specific to your site's code.
- leftwave0
so... is there any way to do this without CSS, or is there a CSS method that works cross-browser platforms?
- ********0
I feel for you in situations like this..
'Use CSS' they laud, separate style from content, - sounds great you think till you realise you have to have a dozen browsers to check it all, spend hours hacking and fiddling only to increase your chances of the page looking right, not guaranteeing it.Dont get me wrong, I love using some CSS, but honestly I find it quicker and easier to still do most of the layout within tables, cause its ridiculous to stay up till the small hours tearing your hair out only to find Opera doesnt understand Float this, and background that.
Its a pain in the arse - its like designing a car but then having to build different versions for California, Kentucky, Macland, Rhode Island.
It fucks me off to be honest, it doesnt matter if your code is fully compliant with some arbitary standard if your client complains that the layout doesnt look right. Waste of time.
Id sooner sweep the streets and with an attitude like this, thats probably what I'll end up doing.hehe :)
- gabriel_pc0
it already works, it's just that the google toolbar for IE messes with the autofill field backgrounds. there's no way to disable this feature via HTML or CSS.
- imakedesign0
could use a flash form
- gabriel_pc0
thanks for that worthless rant miko, he was asking a simple field styling question not your overblown opinion of coding standards compliant pages. go troll somewhere else...
BTW... Here's a help forum topic that's dealing with the exact same problem:
- gabriel_pc0
another good link, here's a list of standard form field names. using these will increase the odds that people with disabilities can use autofill software on your forms exactly as you intended:
- leftwave0
ummm, "he" is a she, FYI.
anyways, i found some good info here:
http://www.htmldog.com/ptg/archi…i tried changing the names of the form fields. can someone please check this out and tell me if these fields are yellow too? sorry, i'd check it myself, but my version of IE won't make them yellow:
http://www.neuroblast.net/EI/con…
thanks!
- gabriel_pc0
lol, I apologize sincerely, that's what I get for not checking out people's profiles before responding! *smacks self in forehead*
- gabriel_pc0
actually, try this style in your css:
.form {
background-color: #5C0505 !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
border: 1px solid #000000;
}
- grafholic0
macromedia forum has interesting thread.
link here:
http://www.macromedia.com/cfusio…i don't know how exactly google toolbar is configured to search for what field name to target as their autofill -- but this thread talks about how you can change your css to hack it.
it says:
"1. You can change the names of your input fields so that Google's toolbar
isn't triggered.or
2. Change this CSS rule:
input, select { background: #333333; border: 1px solid #999999; font-size:
small;}to this (note the !important added after the background color):
input, select { background: #333333 !important; border: 1px solid #999999;
font-size: small;}In case you're not familiar with the !important property, yes it is ! first,
then important. (Often when I tell people this they seem to think it is a
typo and should be important! but it really is !important.)If you want to figure out why this happens, I'd try removing your other CSS
rules one at a time. I have the feeling (but no proof or testing) that it is
the body cursor that's messing things up for you. I'd love to hear what's
causing it, so do let us know if you figure it out."hope this helps.
- leftwave0
hey, that's alright. besides, where in the profile does it say male or femals anyhow?
but, now that i've got your attention, can you tell me if these fields are yellow?
http://www.neuroblast.net/EI/con…
thanks!
- gabriel_pc0
the first 3 are :-(
- leftwave0
great !inportant info, thanks. unfortunately, i can't get my browser to turn these things yellow. funny - i want them to turn yellow to test, but i don't want them yellow in reality. anyway, i have 3 versions now. can some incredibly kind & patient person test these:
1. original version, original form field names, no !important tag:
http://www.neuroblast.net/EI/con…2. modified form names to be non-standard (name, phone, etc):
http://www.neuroblast.net/EI/con…3. used original standard form names, but added the !important value to the CSS:
http://www.neuroblast.net/EI/con…THANK YOU SO MUCH SOMEBODY