How do I include static html in an asp.net mvc app that doesn't use the system css, but it's own styling?

Question

I am using ASP.NET MVC 2 & C#.

I want to include/embed an html page (raw text & styling; no forms) in one of my views as is without my own css styling (read: The site.css styles for the ASP.NET MVC 2 application itself) affecting it. I can access the page statically and open it in a new window and it retains it's styling; however, if I do:

<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
    <!--#include virtual="~\Static\Instructions.htm" -->
</asp:Content>

The styling from the html & the site.css in the web application seem to get merged.

I've added the following ignore route entries as well:

routes.IgnoreRoute("{resource}.html/{*pathInfo}");

I also tried making a partial view control with the raw html in it and rendering that here. That gives the exact same results as this.

Thoughts?

Answer 1

You could add a wrapper <div id="embed"> around your embedded content and then use #embed in your site.css to override the styles you don't want applied.

p {
    color: red;
}

#embed p {
    color: blue;
}

Answer 2

When you include a file with the code above, it's like appending the entire data into the original file, as if there was no include at all. Doing it this way, you will inherit all relative JavaScript and CSS that is on the parent file.

The only way you can solve this is by creating a wrapper around your main content and setting all the CSS elements to affect that wrapper only. Aside from that, the only other option is setting a CSS style for your appended file with specific IDs or clean up your current CSS to be more specific.

One final method, if you have CSS affecting the included file (I assume from your OP, you have CSS styling inside the file itself), you can set !important to them so that they overwrite any other CSS classes affecting them.

Answer 3

I can only suggest to do so as Pat and lighthazard said.

There's no routing problem.

Try to change your perspective to the rendered html code.

If you have a page, and there's an area, that should be in other (none) styles. then you must mark this area either by a css class, if there are many areas, or if this is the only one per page an css id.

By the way, not to style ist not possible in html. At least the browser stylesheets will define the output.

Here's en interesting Question, i hope this will help.

CSS Reset, default styles for common elements

Greets Thomas