Override SharePoint 2010 master page's css property with "!important"

Question

So I have to change a layout of an .aspx page, and I don't want to create a separate master page for it, so I'm overriding the css of my master page on that aspx's layout using !important where necessary.

Everything works just fine except for one property... #s4-bodyContainer has property min-width set to 1550px !important in the master page, and I need to change it to 1300px !important.

If I put my overriding css style in the beginning of my page, it doesn't override master page's style, because in master page there's !important also, and it is being rendered after my written css. And if i put my css in the end of the page, it overrides the master page's style, but does it only after the page load, so every time I go to that page or refresh it, I see a little glitch on loading..

So, is there any chance to solve my problem without modyfing the master page, or creating another one? Just using css on .aspx page?

Thanks in advance!

Answer 1

!important always creates problems, such as the one you are experiencing right now.

The only possibility to override the !important is with higher CSS specificity than the original declaration.

• How to override !important?
• Multiple !important class declarations and precedence
• !important CSS Declarations: How and When to Use Them

So what means specificity? Inline element styles are the most specific you can get, so in a page layout you could add inline-styles (ugly!) to your #s4-bodyContainer with the styles you desire. You might event need to add !important to those, but you can be sure that they are more specific than styled in the stylesheet of the master page.

If you are using <SharePoint:CSSRegistration ...> you can make use of the property CssRegistration.After which allows your CSS to load after a specific CSS file. So if the width is set to 1550px !important in the corev4.css, you could just load your CSS file afterwards and your !important will be used.

All-in-all: The solutions a pretty ugly. You shouldn't use !important in your master page, especially for general stuff like min-width.