current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I have a single-page MVC web app. When a server error occurs, we display the exception in a dialog in the same page. The ASP.NET YSOD adds inline CSS. This changes the fonts for the whole app because of the styles added to the BODY element.

Is there a way to compartmentalize the added CSS to just that dialog? Or have the added CSS styles removed when the dialog is closed? Or edit the styles and error page so the styles are not global?

This is the inline CSS that is added:

<style>
    body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} 
    p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
    b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
    H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
    H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
    pre {font-family:"Lucida Console";font-size: .9em}
    .marker {font-weight: bold; color: black;text-decoration: none;}
    .version {color: gray;}
    .error {margin-bottom: 10px;}
    .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
</style>
share|improve this question
    
Are you able to edit the css been added? If so it can be pretty simple. Otherwise you may have to place a <iframe> in order to isolate the css. –  tweray Jun 25 at 18:25

1 Answer 1

up vote 0 down vote

there are a couple of ways of overcoming this. First you can always set !important at the end of the style tags.

<style type="text/css">
  body {font-family:"Verdana" !important;font-weight:normal !important;font-size: .7em !important;color:black !important;} 
</style>

Though I find that cumbersome and annoying. The better route in my opinion, unless it adds css to the actual elements (i.e. <div style="font-size:15px;">Testing</div>), would be to wrap your popup window elements in a wrapper with an ID and then set all of your css based off of the wrapper and it's children. When you set a higher specificity on the code then it will override lower levels.

Consider three code fragments:

A: h1
B: #content h1
C: <div id="content">
<h1 style="color: #fff">Headline</h1>
</div>

The specificity of A is 0,0,0,1 (one element), the specificity of B is 0,1,0,1 (one ID reference point and one element), the specificity value of C is 1,0,0,0, since it is an inline styling. Since 0001 = 1 < 0101 = 101 < 1000, the third rule has a greater level of specificity, and therefore will be applied. If the third rule didn’t exist, the second rule would have been applied.

reference http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

overall it will be up to you how you handle it but if you can get a grasp of specificity it is actually much better to use this.

share|improve this answer
    
I had thought about using !important, but I agree it's annoying. I also thought about using an iframe as @tweray suggested. I'm considering writing my own error handling page to completely replace the default ASP.NET one. Thanks for your answer. –  D-Money Jun 27 at 16:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.