Develop Reference

inheritance/overwriting existing CSS rules from different external files

I got an existing project, which used to be without Bootstrap(3), but now I have to change that and keep the old css stuff.
My current CSS order:
var bundleCSS = new StyleBundle("~/Views/bundle/newBundle").Include(
"~/Views/Shared/normalize.css",
"~/Scripts/jquery.ui/jquery-ui-latest.custom.css",
"~/Scripts/jquery.jqGrid/ui.jqgrid.css",
"~/Scripts/sweetalert/sweet-alert.css",
"~/Content/bootstrap.css",
"~/Views/Shared/OldButNeededLayout.css",
"~/Content/custom.css"); //will be rendered in that order
The custom.css is used to fix all errors that come from adding bootstrap.css to the project.
The problem here is, that OldButNeededLayout.css has roundabout 3000 lines of css-code and by the way the current project is quite big.
So when overwriting bootstrap with that old css and than fixing the errors, which came by adding bootstrap, than I get an unpredictable results.(because I dont't know where it will change something)
What to do or how to solve integrating bootstrap css/js into (my) existing project(s) ?

This sounds like a messy way to integrate Bootstrap whilst trying to avoid making any changes to the OldButNeededLayout file...
In my experience, integrating Bootstrap into an existing project is quite an undertaking and requires extensive modification of your HTML (adding classes and modifying markup structures) as well as extensive modification of your existing CSS, in order to make it play nice with Bootstrap.
Your approach will make maintenance difficult and will also deliver a lot of unnecessary CSS code to the client.
I would suggest:
Remove the OldButNeededLayout css from your project and clear the
contents of custom so that the vast majority of css is from
Bootstrap.
Obviously, this will look nothing like your site should, so
Methodically fix each bit of layout or styling that needs to change,
in your custom css until you have a site which resembles your
pre-Bootstrap site. Use bits from OldButNeededLayout that are
necessary, but make sure each and every style property is necessary.
This is a lot of work, of course, but it will result in a project which is more maintainable, predictable and concise for the client.
I don't see it as a reasonable expectation that you can just throw Bootstrap onto a large project and not expect to make major changes to your existing HTML and CSS.

The following suggestion isn't ideal and there's certainly better ways of implementing what you need, but I've kept my suggestion in line with your requirement...
In your new custom.css file, you could try being more specific when declaring an element. So if in OldButNeededLayout.css you overrode Bootstrap's style such as:
.divclass .jumbotron h1 {
color: red;
}
You could be declare a higher level of specificity in your custom.css file to ensure it will override what you in OldButNeededLayout.css:
.parent .divclass .jumbotron h1 {
color: blue;
}

<select> tag multiple property throws parser error using runat=server | object of type 'System.Boolean'

The Problem
When using Visual Studio 2010 and attempting to write the following code:
<select runat="server" multiple="multiple" id="prop_typeid" name="property_typeid" class="w290">
a parser error occurs with the following:
Cannot create an object of type 'System.Boolean' from its string representation 'multiple' for the 'Multiple' property
The multiple="multiple" value is required in the code and is required for the jQuery 'jquery-ui-multiselect-widget' plugin by Eric Hynds.
According to Microsoft's ASP.Net support they replied with:
Thanks for notifying us about this bug. At this point we're taking only the severist of bugs to maintain high backward compatibility. This bug does not meet that bar and hence will not be fixed in the current product cycle.
A simple workaround is to use multiple="true". This should give you no compilation errors.
The value "true" works in IE but gives a warning in the UI that it is not a value of the multiple property. If you are manipulating the DOM using jQuery the workaround fails too.

To avoid this, you can easily set multiple attribute in Page_Load:
yourSelectId.Attributes["multiple"] = "multiple";

A Solution
The issue with the IDE is at runtime, the ASP.NET rendering engine also stutters in the same way when using some databinding expressions. So in this case the rendering engine can be tricked to ignore the 'multiple' property for rendering by prefixing the multiple attribute with meta: , but still execute the code, like so:
<select runat="server" meta:multiple="multiple" id="prop_typeid" name="property_typeid" class="w290">
Using 'meta:' in this way successfully renders the select property with the jQuery multiselect widget working nicely. It also allows me to manipulate the select property in code behind by, for example, identifying and assigning the selected state option from the database -
A Codebehind Example below :
if (db.prop_typeid != null)
{
ListItem li = prop_typeid.Items.FindByValue(db.prop_typeid.ToString());
li.Selected = true;
}
Prefixing 'meta:' in this way can be used for various properties on runat=server situations where the above type error occurs to ensure that the rendering engine processes asp.net pages.

You may also achieve this by jQuery once the page has finished load and body is formed:
$(window).load(function () {
$('#chkDC').attr('multiple', 'multiple')
});

parsing html, source code, javascript problem

http://booking.travel24.com/index.php?KID=610000&&id=lmpergebnis&showresult=1&detail=zielgebiet&region=-1&ziel=-1&termin=20.02.2011&ruecktermin=17.03.2011&dauer=-1&abflughafen=46&personen=25;25&kategorie=-1&verpflegung=-1&zimmer=-1
I am trying to parse some HTML parts of this page, but when I check the source code I can not find this: "Tunesien, Marokko".
If I check with xdeveloper I can see this as html:
<a class="reglreg" href="javascript:s_hliste(20009);">Tunesien, Marokko</a>
but if i check source code of the page I can't find this. Why?

If you view the source and search for "Marokko" you will see there are several places where it occurs (loaded as data in several JavaScript arrays).
It appears as if some of the content is produced dynamically through the JavaScript loaded onto the page. That JavaScript builds HTML and changes the page to include the content you are looking for.

To answer your first real question
Why?
Because when you check the source code inside a browser, you'll get the original html code. Then javascript comes along and modify the DOM which you can follow in any modern browser's console.
can i get somehow whole source code
then? if i can not see it in browser
how can i see it?
To make it simple, it depends how you're trying to parse it. With what language?

maybe the data is coming via AJAX call, so it's not there on the html at the start, but dynamically added to it.
if you need to parse this, you can try to "emulate" the ajax call yourself.

HTML to XHTML WebBrowser control

I have been using the .NET WebBrowser control in edit mode as part of an interface for end users to create sections of HTML content for insertion into various websites. They have had a very cutdown list of tags available such as <p>, <br>, <a href>, <strong>, <ul> <li>... they could not apply any formatting on top of the tags as that was determined by the particular web pages css. This system has been working well up until now.
Unfortunately I now have a need for xhtml to go into a larger xml document for aggregation purposes by various other websites. The WebBrowsers main problem seems to be lists where it produces:
<UL><LI>Item1
<LI>item2
<LI>item3</LI></UL>
Is there a good converter library to fix this or could I force the WebBrowser control to create XHTML? I have tried the HTMLAgilityPack but it converted to XHTML by doing something like:
<UL><LI>Item1
<LI>item2
<LI>item3</LI></LI></LI></UL>
I don't think his is appropriately set as surely the tags should be at the end of each item although it would pass xhtml validation. If it is ok, will I end up with rendering issues on certain browsers when the XML is eventually put into whatever website?

Try this.
http://tidy.sourceforge.net/

You must be using Internet Explorer, which is the only browser I can think of that doesn't close list-item tags in a content-editable section. Also, the tags ought to be lower case, which is the other give-away.
It is worth checking that you are sending the correct document-type to the browser as this may solve your problem (i.e. make sure the editable bit is definitely an XHTML page). Other than this, you could manage it by having a plain-text editable area with some custom(ish) mark-up and a preview area below. Erm... a bit like Stack Overflow. That way, you can create the exact mark-up you want, rather than relying on what a browser generates.

C#: Best way to inject CSS into MSHTML instance?

I'm trying to inject some CSS that accompanies some other HTML into a C# managed WebBrowser control. I am trying to do this via the underlying MSHTML (DomDocument property) control, as this code is serving as a prototype of sorts for a full IE8 BHO.
The problem is, while I can inject HTML (via mydomdocument.body.insertAdjacentHTML) and Javascript (via mydomdocument.parentWindow.execScript), it is flat-out rejecting my CSS code.
If I compare the string containing the HTML I want to insert with the destination page source after injection, the MSHTML's source will literally contain everything except for the <style> element and its underlying source.
The CSS passes W3C validation for CSS 2.1. It doesn't do anything too tricky, with the exception that some background-image properties have the image directly embedded into the CSS (e.g. background-image: url("data:image/png;base64 ...), and commenting out those lines doesn't change the result.
More strangely (and I am not sure if this is relevant), was that I was having no problems with this last week. I came back to it this week and, after switching around some of the code that handles the to-be-injected HTML before actual injection, it no longer worked. Naturally I thought that one of my changes might somehow be the problem, but after commenting all that logic out and feeding it a straight string the HTML is still appearing unformatted.
At the moment I'm injecting into the <body> tag, though I've attempted to inject into <head> and that's met with similar results.
Thanks in advance for your help!
tom

Ended up solving this myself:
mshtml.HTMLDocument test = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;
//inject CSS
if (test.styleSheets.length < 31) { // createStyleSheet throws "Invalid Argument if >31 stylesheets on page
mshtml.IHTMLStyleSheet css = (mshtml.IHTMLStyleSheet)test.createStyleSheet("", 0);
css.cssText = myDataClass.returnInjectionCSS(); // String containing CSS to inject into the page
// CSS should now affect page
} else {
System.Console.WriteLine("Could not inject CSS due to styleSheets.length > 31");
return;
}
What I didn't realize is that createStyleSheet creates a pointer that is still 'live' in the document's DOM... therefore you don't need to append your created stylesheet back to its parent. I ended up figuring this out by studying dynamic CSS code for Javascript as the implementations are pretty much identical.