I have dynamically loaded a CSS file, and placed it inside a style tag in a Windows 8 app.
Here's how I load the CSS
function loadHeaders() { var monobookCSSURL = "http://lego.wikia.com/wiki/MediaWiki:Monobook.css?action=raw&ctype=text/css"; WinJS.xhr({ url: monobookCSSURL }).then(loadCSS, xhrError); } function loadCSS(result) { var css = result.responseText; var style = document.createElement("style"); style.innerText = css; document.getElementsByTagName("head")[0].appendChild(style); } When I use the DOM Explorer in Visual Studio to look at what is loaded, I see exactly what I expect, the final tag in the head being a style containing my CSS.
However, when I view my page, non of the CSS that is loaded comes into affect.
I tested this by adding another style tag manually into the HTML source, and that had effect, but the dynamic one didn't.
How can I make this CSS have an effect?
Here is the style tag generated:
#p-cactions ul li { } #p-cactions ul li a { } #content { } body { background: rgb(244, 248, 255); } div.tleft { border: currentColor; } div.tright { margin-left: 13px; } .content-bg { background: white; } pre { overflow: auto; } .pBody { background-color: rgb(222, 227, 232); } body { background: #103A5A url(http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png); } #p-personal li a { color: #DEE3E8; } .portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #355C70; text-transform: Capitalize; } body[class*='ns-118'] { } body[class*='ns-119'] { } body[class*='ns-118'] #p-personal li a { color: #DEE8E3; } body[class*='ns-119'] #p-personal li a { color: #DEE8E3; } body[class*='ns-118'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #35705C; text-transform: Capitalize; } body[class*='ns-119'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #35705C; text-transform: Capitalize; } body[class*='ns-116'] { } body[class*='ns-117'] { } body[class*='ns-116'] #p-personal li a { color: #E8DEE3; } body[class*='ns-117'] #p-personal li a { color: #E8DEE3; } body[class*='ns-116'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #90152C; text-transform: Capitalize; } body[class*='ns-117'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #90152C; text-transform: Capitalize; } body[class*='Forum_Brickiforums'] { } body[class*='Forum_Brickiforums'] #p-personal li a { color: #E8DEE3; } body[class*='Forum_Brickiforums'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #B0B02C; text-transform: Capitalize; } #title-rating2 { display: none; } #footer { background: #DEE3E8; border-color: #355C70; } .wikiaOnly { display: none; } div.User-help-badge-1 { left: 500px; top: 2px; position: absolute; } div.User-help-badge-2 { left: 540px; top: 2px; position: absolute; } div.User-help-badge-3 { left: 580px; top: 2px; position: absolute; } div.User-help-badge-4 { left: 620px; top: 2px; position: absolute; } div.User-help-badge-5 { left: 660px; top: 2px; position: absolute; } .infoboxtoc .toc { margin: 0px; padding: 0px; border: currentColor; width: 100%; } .infoboxtoc #toctitle { display: none; } .infoboxtoc .NavHead { padding-right: 2px; padding-bottom: 12px; float: right; } .infoboxtoc .NavFrame { margin-bottom: -23px; } .ttbutton { border-radius: 2px; left: 114px; top: 200px; padding-right: 5px; padding-left: 5px; display: none; position: fixed; transform: rotate(90deg); background-color: rgb(173, 173, 173); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } .wikia-menu-button { display: none !important; } :first-of-type.portlet > .pBody > ul > li:not([id]) { display: none !important; } 
