CSS Styles not rendering for Angular View in IE8

Question

I have an angular app that is working well except in IE8. Essentially, my styles from the external stylesheet are not taking effect on code that is rendered inside of my view. I've followed the Angular IE guide. Here is the code I have on my html element:

<!--[if IE 8]>         
<html class="no-js lt-ie9" xmlns:ng='http://angularjs.org' id='ng-app' ng-app='HPApp' ng-controller='HPMainController' ng-init='loadHP()'> 
<![endif]-->

I later render an IE specific stylesheet, otherwise I use data binding to render a stylsheet specific to the URL

<!--[if IE 8]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" ng-href="css/{{cssPath}}">
<!--<![endif]-->

Later in the body of my html I have a div with a ng-view attribute

<div ng-view></div>

If I delete the div with ng-view and hardcode in my template my styles take effect. Otherwise, my styles seem to be applied to the page before the template is rendered.

Also, note that if I use the ng-href attribute on my IE specific stylesheet, IE will not load it at all.

Having done a bit of work with getting IE8 and AngularJS to play nice, I can at least suggest that IE8 is a lot more temperamental about poorly formed HTML especially in conjunction with nesting templates like with ng-view or other methods. I had a few cases where very odd things were not working only in IE8 just to eventually figure out it was because I made an html mistake (unclosed tag, self-closing a tag that is not allowed to self-close, etc) — Rich
– Rich, Commented Feb 24, 2014 at 22:28
@Rich have you experimented with the ng-view onload attribute? Do you think that could somehow reload my CSS after the template has rendered? — dtothefp
– dtothefp, Commented Feb 25, 2014 at 0:50
Sorry I have not, I do templating a bit differently due to specific requirements. Although what I was saying is more along the lines that if this case is similar to my issues, the CSS doesn't need to be reloaded but rather that some malformed HTML is preventing the already loaded CSS from being applied properly. Search also brings up this stackoverflow.com/questions/20556102/… . Which reminds me I had to include the html5shiv to support HTML5 tags in IE8. — Rich
– Rich, Commented Feb 25, 2014 at 15:35

Łukasz Ł · Accepted Answer · 2014-06-26 14:33:24Z

0

Did you add

document.createElement('ng-view');

to your index file ?

angular doc p.4

edited Jun 26, 2014 at 14:33

answered Jun 26, 2014 at 14:26

Łukasz Ł

513 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Styles not rendering for Angular View in IE8

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related