Removing certain CSS using Javascript / jQuery

Question

I have this CSS for a table (which is just one row) which is position at the bottom of the screen

#bottomBar td {
filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
padding: 10px !important;
color: white;
border: 2px solid white !important;
font-weightL bold !important;
cursor: pointer;
}

As you can see, the filter is there just for IE 8. I need this compatible with IE 10 as well, so I need to remove the filter and replace it with, let's say

background-color: blue;

to give the td some color. I tried this

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
$('#bottomBar td').removeAttr('style');
$('#bottomBar td').attr('style', 'background-color: blue; padding: 10px !important; color: white; border: 2px solid white !important; font-weight: bold !important; cursor: pointer;')

but that doesn't work, I also tried just placing

$('#bottomBar td').css('filter','');

inside the if IE 10 function but that doesn't work either.. any other ideas?

Note that I cannot remove or add classes, long story short I have a really long script and the code will break if I add and remove a class. I also can't have an external stylesheet either, sorry I didn't mention this in the post. (I know having an ie10 only stylesheet is best but the person I'm writing the code for needs it done a certain way).

Is there any reason why you can't pull the filter part out into it's own css class? Then you could simply use add\remove class instead? — Kyle Muir
– Kyle Muir, Commented Nov 4, 2013 at 19:05
put the rule into an IE conditional comment block within page and use an IE stylesheet or style tag — charlietfl
– charlietfl, Commented Nov 4, 2013 at 19:06
@KyleMuir Hm yea I have a really long script and it will break the if I add a class to it — user2817200
– user2817200, Commented Nov 4, 2013 at 19:08

talemyn · Accepted Answer · 2013-11-04 19:36:16Z

3

If you are running into a lot browser-specific styling issues, one of the things that you might consider, is using JS to add a body-level class that identifies details about the browser that the user is using. For example:

Firefox: <body class="ff">
IE10: <body class="ie10">
IE7: <body class="ie7 ielt10"> (ielt10 = "IE, less than 10" . . . i.e., IE browsers version 9 or older)
etc.

As much as we would all like to write code that works for all browsers, we all know that isn't going to happen. :) Setting up a framework like this makes it easy to address browser-specific styling in your CSS. If you set it up like this, then you could change your CSS like this:

#bottomBar td {
    padding: 10px !important;
    color: white;
    border: 2px solid white !important;
    font-weight: bold !important;
    cursor: pointer;
}

.ie8 #bottomBar td {
    filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
}

Now, only IE8 browsers will add that filter.

It's a little bit of work to set up the JS up front, but once it's in place, it makes addressing those browser-specific issues that MUST have a work-around, MUCH easier.

edited Nov 4, 2013 at 19:36

answered Nov 4, 2013 at 19:29

talemyn

8,0004 gold badges33 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2817200 Over a year ago

good idea, I will keep this in mind, I already started my code and am way into it but next time I will do it this way for sure.

Kyle Muir · Accepted Answer · 2013-11-04 19:25:11Z

1

If my understanding is correct you can do the following:

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
    $('#bottomBar td').css('filter', 'none');
    $('#bottomBar td').css('color', 'red');
    $('#bottomBar td').css('cursor', 'default');
    ...
}

The default value for filter is none (https://developer.mozilla.org/en-US/docs/Web/CSS/filter), so by setting it to this you should remove whatever it was doing.

In this example below I change the color of the text in IE10 to red and the cursor will be the default cursor, in any other major browser it will be white text and a hand cursor.

Fiddle: http://jsfiddle.net/KyleMuir/8mxem/5/

edited Nov 4, 2013 at 19:25

answered Nov 4, 2013 at 19:12

Kyle Muir

3,9252 gold badges24 silver badges28 bronze badges

4 Comments

user2817200 Over a year ago

Gr, this doesn't seem to work for my code. There must be some CSS or JS in my script which is preventing it. Okay then I'll just go through my entire code and find it why setting filter to none isn't working for me.. thanks.

Kyle Muir Over a year ago

Apologies, please see my edited fiddle - there was quite a few problems with it. These have been fixed. Hopefully it helps :) I stuck with an arbitrary change the color of the text.

Kyle Muir Over a year ago

Also, you have a lot of !important tags in your css - you cannot override these. See here: css-tricks.com/override-inline-styles-with-css

user2817200 Over a year ago

Right, okay yea in the fiddle it is good but in my code it doesn't do the same thing so it's probably a problem somewhere in my code. Thanks. And yea I do have a lot of important tags cuz there is an external styesheet which needs to be linked to all the code I write (company policy) so I just use !important tags to override them.

Collectives™ on Stack Overflow

Removing certain CSS using Javascript / jQuery

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related