invalid argument for .css()

Question

I'm using this code with jquery

$(".tab").css({'background-color': '#f3f6ed', 'border': '4px solid rgba(0,0,0,0.1)', 'border-bottom': 'none'});

It's to change the style for a tab when I click on it. It works in browsers expect for explorer (stupid microsoft..) I get "invalid argument"

Not sure how I can fix this.

Answer 1

Whenever you encounter a hyphenated property, like background-color, you have to switch to the camel-case version, i.e. backgroundColor. Edit: As pointed out by Pekka, this was utter nonsense.

Answer 2

I am not 100% sure because rgba isn't supported in IE; a reason why it throws the error.

Answer 3

I can't test right now, but my suspicion is the rgba part in

rgba(0,0,0,0.1)

IE doesn't support rgba colour values until version 9.

I'm not sure whether there is a jQuery workaround for this. jQuery.support() doesn't seem to be able to sniff rgba support.

In the worst case, you'll have to test for browsers that support the property.

Update: The modernizr library can test for rgba support.

Answer 4

I'm not sure what kind of error you are getting, but if it is a javascript error, I would simply put the properties in a class and use jquery's .addClass() instead.

I would probably do that anyway...