UPDATE: THIS HAS BEEN SOLVED.

I'm trying to change the default style of an Assistly site through JavaScript, because the stylesheet is not editable by me. It's working fine in Chrome, Safari, Opera, and IE9; but not in IE 6,7,8 or any Firefox.

In the code below the first two lines that are setting an h2 and an image are working across all browsers, but the .css() lines are not. Why would .css() not work in certain browsers?

Here is the code.

<script type="text/javascript">
jQuery(document).ready(function(){
$("#support-header .wrapper h2").first().html('<h2>Real Estate Help</h2>');
$("#pany-header .wrapper").html('<a href="/"><img src=".png" /></a>');
$("body").css({'background': '#FFFFFF !important'});
$("#pany-header").css({'background': 'none !important'});
$("#support-header").css({'background': 'none !important', 'border-bottom': 'none', 'padding': '0'});
$("#pany-support-portal").css({'background-image': 'url(.jpg) !important', 'background-repeat': 'repeat-x', 'margin-top': '10px'});
});
</script>

UPDATE: THIS HAS BEEN SOLVED.

I'm trying to change the default style of an Assistly site through JavaScript, because the stylesheet is not editable by me. It's working fine in Chrome, Safari, Opera, and IE9; but not in IE 6,7,8 or any Firefox.

In the code below the first two lines that are setting an h2 and an image are working across all browsers, but the .css() lines are not. Why would .css() not work in certain browsers?

Here is the code.

<script type="text/javascript">
jQuery(document).ready(function(){
$("#support-header .wrapper h2").first().html('<h2>Real Estate Help</h2>');
$("#pany-header .wrapper").html('<a href="http://help.mysite./"><img src="http://www.mysite./logo-red.png" /></a>');
$("body").css({'background': '#FFFFFF !important'});
$("#pany-header").css({'background': 'none !important'});
$("#support-header").css({'background': 'none !important', 'border-bottom': 'none', 'padding': '0'});
$("#pany-support-portal").css({'background-image': 'url(http://www.mysite./container-bg2.jpg) !important', 'background-repeat': 'repeat-x', 'margin-top': '10px'});
});
</script>

• javascript
• jquery

• 2 Should those spaces be there, in the file name? And what about all these importants? – GolezTrol Commented Oct 1, 2011 at 14:42
• 1 SSCCE please. – Matt Ball Commented Oct 1, 2011 at 14:42
• Link added. Spaces removed - somehow those were inserted when copying in code here. I put the !importants in to override other CSS already set in a stylesheet that I cannot change. – kfawcett Commented Oct 1, 2011 at 15:36
• It might be as simple as what GolezTrol is getting at: spaces are invalid in URLs, and !important statements are going to absolutely kill your inheritence. If the various browsers have a different way of resolving stacked "!important" statements, it might be the CSS and not the JS at all. – Greg Pettit Commented Oct 1, 2011 at 15:36
• There are no spaces in the actual code. It happened when copying into Stack Overflow. Removing the !important statements makes the code stop working in ALL browsers. It's needed because the CSS which, I cannot edit, already has !important statements specified in it. – kfawcett Commented Oct 1, 2011 at 16:01

3 Answers 3

I will add to what others have said: I suspect the problem may be related to the !important flag.

The question is why do you need it? You're setting this on an inline style, so that ought to override any other styles anyway; the only thing that won't be overridden by default on an inline style is another style that is marked !important, so I assume that's what you're trying to do.

The trouble is that as soon as you use !important, you're basically telling the browser that this style should trump everything else; inheritance and precedence go out of the window.

If you have multiple !important styles on the same element, both will have equal precedence, so you can never really be sure what's going to happen. Some browsers will pick up one, some the other.

The real lesson to be taken from this is to avoid using !important in your stylesheets, unless it is absolutely unavoidable, and certainly avoid it for anything that you will subsequently want to override.

Due to the way CSS arranges things in order of precedence and inheritance, there are in fact very very few cases where !important is actually needed. There is almost always an alternative (better) way of doing it.

So the short answer: Re-work your stylesheets to get rid of the !important markers. Your jQuery code is not going to work correctly until you do this (and in fact, looking at the number of !important markers in your site, your CSS on its own might already be struggling to get things right as it is)

Remove !important from the your code. !important should only be used within stylesheets, not within inline attributes.

In IE, it works well to use

element.css('property', 'value')

Although you then need a separate line for every property.

Note: you can specify important easily with

$.('#elid').css('display', 'block !important')