CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MacFerret
MacFerret

Reputation: 57

Why can't I change the line-height CSS property using .css() in jQuery?

I'm trying to change the line-height property with jQuery using this:

jQuery(document).ready(function () {
    var windowWidth = $(window).width();
    $('h1').css({
        'top': Math.floor(windowWidth * 0.0964) + 'px',
        'left': Math.floor(windowWidth * 0.0872) + 'px',
        'line-height': '0.9em !important'
    });
});

If I use the inspector and check the element style, I can see the top and left property but not the line-height, can someone explain to me what's wrong?

And here's the jsFiddle I made just to be sure I'm not crazy!
http://jsfiddle.net/p4DU6/4/

Tested it in FF, Chrome, IE8 and IE9

Upvotes: 1

Views: 154

Answers (2)

MMM
MMM

Reputation: 7310

Don't use !important. There's no need for that.

It works for me if you remove that.

Your inline style will have higher specificity than anything else in your CSS anyway, so no need to use !important.

Upvotes: 2

George Georgovassilis
George Georgovassilis

Reputation: 135

This is discussed here: How to apply !important using .css()?

The problem seems to be the !important statement. There is a bug report for jquery and a way to work around it, namely creating new classes and combining them:

http://bugs.jquery.com/ticket/11173

Upvotes: 1

Related Questions