Menu
Recently I came across a wierd thing in IE.
It ignores a '!important' tag for CSS attributes.
Does anyone have a workaround for this, except putting it directly as a style attribute inside the DOM?
I do not want to go into the DOM and put styling attributes in it.
491
To avoid using ! important , all you need to do is increase specificity. In your case, both of your selectors have identical specificity. The issue is most likely caused by your media query being placed before your "Normal CSS", and thus getting overridden.
The use of ! important is considered an anti-pattern and bad practice. ! important overrides all other declarations and makes the CSS code more difficult to maintain and debug.
I've found the !important tag will not work in a style if it has previously been used on the style that you are trying to overwrite/update.
For example, if you have:
.example{
color:#ff0000 !important;
}
And, say for example, if your using Media Queries and tell the style to change upon the browser being reduced in size:
.example{
color:#fff !important;
}
The secondary colr #fff won't take affect because of the !important assigned to the color #ff0000.
Just an observation/thought.
It's pretty hard to guess what is causing the issue. For the users of SO to really help you, you will have to either supply a live link, sample code on jsfiddle.net or post your HTML and CSS in the question.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
