CODEWITHSUNDEEP
htmlcss
Broncha
Broncha

Reputation: 3794

How to disable a CSS rule

I am using a Wordpress carousel plugin which sets a CSS rule

body * {
  line-height:1.2em;
}

This is causing trouble in my layout. The line height in my CSS for body is

body{ line-height: 19px;}

So I override body * as {line-height:19px} but it still breaks some of the layout. When I remove that rule using Firebug, everything works fine.

Now the problem here is, I dont want to edit the plugin CSS file, as every time I update it, I will have to do it.

Is there a way I can nullify the effect of body *?

This declaration is taking precedence over all other line-height properties.

Here is the link. The CSS file loaded by a carousel plugin is breaking the navigation.

Upvotes: 5

Views: 14585

Answers (3)

Scott Selby
Scott Selby

Reputation: 9580

use this :

body * { line-height: 19px !important;}

this will override any other line height being set in other css file , alternativly you can put this in HTML

<style>
    body * { line-height: 19px}
</style>

style elements in HTML override all css files

or... you can do this

<body style="line-height: 19px;"> ... </body>

inline css in elements overrides all css files , and <style> elements

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157434

Better declare an id for the body element, it has highest specificity and than apply the line-height

<style>
#super_container {
   line-height: 19px;
}
</style>

<body id="super_container">
    <!-- All stuff goes here -->
</body>

Or you can use an inline style which has the highest specificity, which will over-ride any defined style for <body> but that will be tedious if you want to change you need to change on each and every page...

Upvotes: 1

huysentruitw
huysentruitw

Reputation: 28151

Reset the line-height by overriding it like this:

body * { line-height: inherit; }

Upvotes: 3

Related Questions