Reputation: 83
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>');
$("#company-header .wrapper").html('<a href="http://help.mysite.com/"><img src="http://www.mysite.com/logo-red.png" /></a>');
$("body").css({'background': '#FFFFFF !important'});
$("#company-header").css({'background': 'none !important'});
$("#support-header").css({'background': 'none !important', 'border-bottom': 'none', 'padding': '0'});
$("#company-support-portal").css({'background-image': 'url(http://www.mysite.com/container-bg2.jpg) !important', 'background-repeat': 'repeat-x', 'margin-top': '10px'});
});
</script>
Upvotes: 2
Views: 11955
Reputation: 168853
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)
Upvotes: 4
Reputation: 349262
Remove !important
from the your code. !important
should only be used within stylesheets, not within inline attributes.
Upvotes: 2
Reputation: 7489
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')
Upvotes: 0