CODEWITHSUNDEEP
javascriptjquery
kfawcett
kfawcett

Reputation: 83

jQuery .css() not working in IE 6,7,8 and Firefox, but works in Chrome, Safari, Opera

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

Answers (3)

Spudley
Spudley

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

Rob W
Rob W

Reputation: 349262

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

Upvotes: 2

yoozer8
yoozer8

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

Related Questions