CSS Attribute Selectors In IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

CSS Attribute Selectors In IE

Post by JellyFish »

When I use this in the head of my document:

Code: Select all

input[type="text"] {
boder: bla bla;
}
It works as expected in FF and Opera. BUT in IE it doesn't do anything at all. Why doesn't IE understand this selector syntax? I change it to just "input" and it understands I tried "input[type~="text"]" and "input[type|="text"]" and nnnnnnwwwwwe!!!

:?: :?: :?:
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Image

Other than that, I can't help much, but I am sure it has something to do with IE's lack of compliant CSS rendering.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Waaaaa!!!! I don't like this. I want it to work in IE. I want every text input field to be styled this way. How can I do this in both IE, FF and Opera, with or without this selector???
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

There are several syntax usages that confuse IE. You might want to google IE css hacks. There are entire communities dedicated to the subject.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Here's a informational blog post:
http://rakaz.nl/item/how_well_do_browse ... _selectors

Seems IE7 even is far behind the like of Firefox. If that's true of the final IE7 release... If anything, this demonstrates MS have a long road to travel before catching up with Firefox (which has FF2 on release later today with Javascript 7 and client caching). Does httpOnly cookies stack up FF2's improvements? I think not...

Check the blog entry and linked to browser tests - you can run your own tests, and click orange/red rows for extra details. I tested IE6 and it showed the standard attribute=value test fails if an attribute value is uppercase. Check you html, and make sure all attributes and their values are lowercase where possible (obviously not for real text though...). Also delete any whitespace between the quotes and a value, which is flagged as another reason for IE6 to fail.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

I took the test at http://www.css3.info/selectors-test/index.html and came up with...

Firefox 1.5.0.7 - 26 Passed, 10 Buggy and 7 Unsupported of 43 Selectors
Opera 9.0.1 - 23 Passed, 3 Buggy, 17 Unsupported
Explorer 6 - 10 Passed, 1 Buggy, 32 Unsupported
Explorer 7 - 13 Passed, 4 Buggy, 26 Unsupported
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Okay. Clear questions: What selector would I use in CSS to select all the textbox's in IE??? What's the syntax???
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

if input{} is not enough, you'll have to either use javascript, or add a class to all the text boxes you want to select...
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

You might try the form id value, and use a child/descendent selector...assuming IE6 let's you. ;).

Javascript would work either way, but a CSS solution would be better.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

if input{} is not enough, you'll have to either use javascript, or add a class to all the text boxes you want to select...
Input won't work. It also includes the sumbit buttons etc.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

But it won't affect input buttons if you use the button tag instead of input tag.
Post Reply