StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAngularJS app not rendering properly in IE 8 for multiple reasons
primarykey
Id
18476434
data
AcceptedAnswerId
0
AnswerCount
4
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-08-27T22:19:41.223
FavoriteCount
0
LastActivityDate
2014-03-07T14:23:10.803
LastEditDate
LastEditorUserId
0
OwnerUserId
0
ParentId
0
PostTypeId
1
Score
3
ViewCount
11753
LastEditorDisplayName
text
Body
<p>I have been working on a portfolio site called <a href="http://maxmythic.com/" rel="nofollow noreferrer">maxmythic.com</a> using AngularJS and have managed to get it to show up good in everything but IE 8 and 7 (I'm not even bothering with IE 6). I even added all the IE8 AngularJS fixes found <a href="http://docs.angularjs.org/guide/ie" rel="nofollow noreferrer">http://docs.angularjs.org/guide/ie</a> and <a href="http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html" rel="nofollow noreferrer">http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html</a> I thought those fixes would make it work but its seems like nothing changed. </p> <p>At <a href="http://maxmythic.com/" rel="nofollow noreferrer">http://maxmythic.com/</a> and <a href="http://maxmythic.com/design" rel="nofollow noreferrer">http://maxmythic.com/design</a>, a 3 x 6 grid of 'design tile' divs (with titles and background images) are supposed to display. It gets created by <code>ng-repeat</code> in the Angular view called <code>design.html</code> </p> <pre><code><section ng-controller="MainCtrl" class="main"> <a href="#" ng-repeat="tile in designTiles" ng-href="{{tile.url}}" class="{{tile.bgImageClass}}"> <div ng-mouseenter="blankBar='blueBar'" ng-mouseleave="blankBar = 'blankBar'" class="tile-info"> <div class="blankBar" ng-class="blankBar"></div> <h3 class="tile_title">{{tile.title}}</h3> </div> </a> </section> </code></pre> <p>In IE 8, ngRepeat will seem to overwrite each design tile div with the next design tile div in the order they appear in my <code>designTile</code> object list </p> <pre><code>angular.module('maxmythicApp') .controller('MainCtrl', function ($scope) { $scope.designTiles = [ { url : '/design/vance-and-gary-unhinged', bgImageClass : 'vance-and-gary-unhinged', title : 'Vance & Gary Unhinged', // use : 'Album Art' }, { url : '/design/dam-funk', bgImageClass : 'dam-funk', title : 'Dam-Funk', // use : 'Logo' }, ..... ..... ..... { url : '/design/various-sketches', bgImageClass : 'various-sketches', title : 'Various Sketches', // use : 'Logo' }, { url : '/design/maxmythic-dot-com', bgImageClass : 'maxmythic-dot-com', title : 'maxmythic.com', // use : 'Logo' }, ]; }); </code></pre> <p>As the page is loading, I can see the first one appear but, as soon as it appears, it gets replaced by the next one. Only one design tile div is ever seen at one time and ultimately the last design tile equates to the last object in the the <code>designTile</code> list which is:</p> <pre><code>{ url : '/design/maxmythic-dot-com', bgImageClass : 'maxmythic-dot-com', title : 'maxmythic.com', }, </code></pre> <p>If I look into IE's developer tools HTML tab I see what seems to be a messed up out of order DOM and look, you can see all the 18 design tile divs displayed there. It all looks like this </p> <p><img src="https://i.stack.imgur.com/16kwK.jpg" alt="enter image description here"></p> <p>So none of the design tiles show up there but if I look at the original source it looks totally different. In fact, the <code><section></code> element that contains the list of design tile divs does not even appear. </p> <pre><code><!doctype html>     <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>/\/\/\</title> <meta name="fragment" content="!"> <meta name="description" content="Max Mythic : Designer & Front-end Developer"> <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-retina.png"> <link href="favicon_32x32.ico" rel="icon">  <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="apple-touch-icon-retina.png"> <meta name="viewport" content="width=device-width"> <base href="/">  <link rel="stylesheet" href="styles/aff564d2.main.css"> </head> <body id="ng-app" ng-app="maxmythicApp"> <div id="page"> <header> <h1 class="logo"> Max Mythic : Designer, Illustrator & Developer <a href="/"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z"></svg> </a> </h1> <nav class="pagenav" role="navigation"> <ul> <li> <a href="/design"> design </a> </li> <li> <a href="/about"> about </a> </li> <li> <a href="/contact"> contact </a> </li> </ul> </nav>  </header>    <div class="container" ng-view=""></div> <div id="layout_footer"></div> </div> <footer role="footer" id="footer"> <ul> <li> <a class="icon" target="_blank" href="https://www.facebook.com/maxmythic"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"><path d="M13.359,14.948H9.168c0,6.7,0,14.949,0,14.949H2.955c0,0,0-8.165,0-14.949H0V9.671h2.955V6.25 c0-2.448,1.162-6.269,6.271-6.269L13.827,0v5.126c0,0-2.798,0-3.34,0c-0.545,0-1.317,0.271-1.317,1.437v3.109h4.736L13.359,14.948z"></svg> </a> </li> <li> <a class="icon" target="_blank" href="https://twitter.com/maxmythic"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30.246 24.584"><path d="M27.149 6.125c0.015 0.3 0 0.5 0 0.803c0 8.201-6.242 17.656-17.657 17.656c-3.504 0-6.768-1.027-9.513-2.787 c0.484 0.1 1 0.1 1.5 0.086c2.908 0 5.584-0.992 7.707-2.656c-2.715-0.051-5.006-1.846-5.796-4.311 c0.378 0.1 0.8 0.1 1.2 0.109c0.566 0 1.114-0.072 1.635-0.217c-2.84-0.568-4.979-3.08-4.979-6.084 c0-0.025 0-0.053 0.001-0.08C2.05 9.1 3 9.4 4 9.422C2.358 8.3 1.3 6.4 1.3 4.3 c0-1.137 0.306-2.204 0.84-3.12C5.166 4.9 9.7 7.4 14.9 7.619c-0.104-0.453-0.161-0.93-0.161-1.414 C14.734 2.8 17.5 0 20.9 0c1.785 0 3.4 0.8 4.5 1.959c1.414-0.277 2.742-0.795 3.94-1.506 c-0.465 1.449-1.446 2.666-2.729 3.433c1.258-0.149 2.453-0.483 3.565-0.977C29.417 4.2 28.4 5.2 27.1 6.125z"></svg> </a> </li> <li> <a class="icon" target="_blank" href="https://plus.google.com/113556551990494099731"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 28.939 29.768"><path d="M15.263 16.994l-1.396-1.084c-0.426-0.354-1.007-0.818-1.007-1.67c0-0.855 0.581-1.399 1.086-1.903 c1.626-1.28 3.251-2.642 3.251-5.513c0-2.952-1.856-4.504-2.748-5.241h2.4L19.368 0h-7.633c-2.094 0-5.111 0.496-7.32 2.3 c-1.666 1.437-2.479 3.418-2.479 5.2c0 3 2.3 6.1 6.4 6.098c0.389 0 0.813-0.038 1.238-0.078 c-0.191 0.466-0.386 0.854-0.386 1.515c0 1.2 0.6 1.9 1.2 2.637c-1.744 0.121-5 0.314-7.4 1.8 C0.694 20.8 0 22.8 0 24.215c0 2.9 2.7 5.6 8.3 5.553c6.662 0 10.189-3.688 10.189-7.336 C18.517 19.8 17 18.4 15.3 16.994z M10.188 12.529c-3.333 0-4.843-4.31-4.843-6.908c0-1.012 0.19-2.058 0.851-2.874 C6.818 2 7.9 1.5 8.9 1.465c3.214 0 4.9 4.3 4.9 7.143c0 0.7-0.077 1.939-0.969 2.8 C12.198 12.1 11.2 12.5 10.2 12.529z M10.227 28.14c-4.145 0-6.817-1.981-6.817-4.74c0-2.756 2.479-3.688 3.331-3.995 c1.626-0.548 3.72-0.623 4.067-0.623c0.388 0 0.6 0 0.9 0.039c2.946 2.1 4.2 3.1 4.2 5.1 C15.923 26.3 13.9 28.1 10.2 28.14z"><polygon points="25,12.5 25,8.6 23.1,8.6 23.1,12.5 19.3,12.5 19.3,14.4 23.1,14.4 23.1,18.3 25,18.3 25,14.4 28.9,14.4 28.9,12.5"></svg> </a> </li> <li class="madeby"> <p>Made by</p> <svg class="maxmythic" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><style>.style0{fill:#666666;}</style><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z" class="style0"></svg> </li> </ul> </footer> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script src="scripts/cdf6190d.scripts.js"></script>  <script> var _gaq=[['_setAccount','UA-37437533-1'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> </body> </html> </code></pre> <p>Additionally, IE 8 throws the following error</p> <pre><code>TypeError: Unable to get value of the property 'childNodes': object is null or undefinedundefined </code></pre> <p>Another funny thing is that if I enter <code>http://maxmythic.com</code> into the address bar, IE8 will add a <code>#</code> (hashtag) turning that original URL into <code>http://maxmythic.com/#/</code>. This screws up the pretty URL structure I had going with HTML5 mode.</p> <p>On top of all of that 98% of my CSS is not being applied to the html. Maybe that is a separate question all together but I thought I'd mention it just in case anyone had run into all of these issues before and had a solution. </p> <p>All of the site's files can be viewed at my gh-pages repo here <a href="https://github.com/siddhion/maxmythic/tree/gh-pages" rel="nofollow noreferrer">https://github.com/siddhion/maxmythic/tree/gh-pages</a></p> <p><strong>Any ideas on what is going on here and how to solve it?</strong></p>
Tags
<javascript><internet-explorer><angularjs><internet-explorer-8><angularjs-directive>
Title
AngularJS app not rendering properly in IE 8 for multiple reasons
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. This table or related slice is empty.
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POAngularJS app not rendering properly in IE 8 for multiple reasons
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.